网页制作 | Github搭建博客

vlambda
2020-02-21

网页制作 | Github搭建博客

最近小编接到了一个坏消息，那就是我3月2日也要开始上网课了。。

（奇怪的知识增加了）

尽管如此，小编还是会尽量抽时间把我学习到的知识分享给大家。

前言

搭建一个个人博客系统，在大家的印象中一般是要先有一台服务器，有云数据库，再注册域名，甚至有必要自己手撸html、php代码自己写网页。这些东西不仅麻烦，还要自己支付大量的金额，往往一台基础服务器+云数据库一年就要七百块钱左右，超出了许多普通学生的支付能力，比如说小编我。。

网页制作 | Github搭建博客

但是我们要相信，科技是为了懒人服务的！

准备

Github很好的解决了服务器和域名的问题，因为我们在上面创建仓库时会自动分配一个 github.io 的二级域名。

博客的框架有很多，比如hexo，wordpress，jekyll，它们能帮我们快速方便地搭建博客，省去了自己写网页的痛苦（当然，想考验自己的同学们也可以尝试自己写）。今天，懒惰的小编就选用hexo来搭建博客。

hexo框架比较简单，写文章时使用Markdown即可，框架会把文章编译成静态网页，我们将此网页上传到Github就可以被访问到。（当然，国内访问Github会比较慢，用神奇的梯子会有奇效，但是国内有gitee也可以，大家可以根据情况自己选择）

环境配置

网页制作 | Github搭建博客

（出现此图即成功）

Hexo

接下来安装Hexo博客框架。Hexo官方提供了命令行工具来快速部署博客。所以我们先安装Hexo命令行工具。

npm install -g hexo-cli

小编在这里卡住了，大家有可能也会遇到

网页制作 | Github搭建博客

解决的办法很简单，这里我们修改npm的安装源，再重复上一步即可。

npm config set registry https://registry.npm.taobao.org
#安装后，用以下命令验证是否安装成功hexo -v#以下为小编这边的输出：+ [email protected]added 74 packages from 319 contributors in 3.666shexo-cli: 3.1.0os: Windows_NT 10.0.18362 win32 x64node: 12.16.0v8: 7.8.279.23-node.31uv: 1.34.0zlib: 1.2.11brotli: 1.0.7ares: 1.15.0modules: 72nghttp2: 1.40.0napi: 5llhttp: 2.0.4http_parser: 2.9.3openssl: 1.1.1dcldr: 35.1icu: 64.2tz: 2019cunicode: 12.1#成功

创建项目

开始了开始了！

先在cmd进入一个自己喜欢的目录下，使用以下命令：

hexo init <folder>    #<folder>是项目名称，按自己喜欢取名，我使用az

等待完成后，就出现了Hexo初始化的文件：

网页制作 | Github搭建博客

继续，安装相关node依赖：

npm install#接下来，使用generate命令将刚刚生成的文件编译成静态HTML代码hexo generate

可以看到输出结果里有.html .js .css 等文件，它们都保存在public文件夹下。

然后我们使用server命令，让网页先在本地运行起来：

hexo server

网页制作 | Github搭建博客

部署

现在，我们需要将建好的博客部署到GitHub page上验证一下，成功之后我们就可以进行更换主体，发布文章等。

我们先在GitHub上创建一个仓库。

网页制作 | Github搭建博客

各位同学创建名规则可以参考小编的，避免出错（用户名.github.io，每个GitHub账号只能申请一个可访问域名)

仓库创建完成后，使用Hexo部署命令：

#先安装一个插件npm install hexo-deployer-git --save#部署hexo deploy

然后我们需要修改本地的配置文件 _config.yml，这个文件在本地项目根目录下。拉到最下面：

//此下为原文件部分# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy: type: ''  //修改后# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy: type: git repo: [email protected]:andyzhongzxy/qhy2000.github.io.git  branch: master

出现如下内容就算是部署好了：

网页制作 | Github搭建博客

这时我们就可以访问刚刚Github分配的域名了https://andyzhongzxy.github.io/

网页制作 | Github搭建博客

此时会看到GitHub仓库多了一些东西：

网页制作 | Github搭建博客

这里指的是本地Hexo根目录public文件夹下的文件都被上传了，Hexo把编译后的静态页面上传到Github的master分支上。

站点配置

上面我们仅仅是将页面部署了，但是当别人用搜索引擎搜索东西时是根本不会看到我们的，因为我们并没有留下关键字可以让引擎知道我们是做什么的。

此时我们再打开_config.yml文件，找到site配置信息。

//以下为原文件# Sitetitle: Hexosubtitle: ''description: ''keywords:author: John Doelanguage: entimezone: ''
//以下是修改，大家可以根据自己的实际情况更改# Sitetitle: CodeWingsubtitle: '分享学习技术经验的博客'description: 'STM32，python，c，计算机技术、电控方面知识分享'author: A&Zlanguage: zh-Hans
//修改完后，重新上传hexo d -g

修改完后我们可以看到页面标题等已经有变化了：

修改主题

小编觉得默认的风格并不好看，决定先用Next主题试试。

首先我们需要先将Next主题从GitHub上克隆下来，命令如下：

git clone https://github.com/theme-next/hexo-theme-next themes/next

我们直接将这个主题克隆至项目的 themes 目录下。

克隆完成后，Next 的源码就会出现在 themes 目录下。我们需要修改根目录下的 _config.yml文件中的主题配置，这样我们就可以使用刚才我们克隆好的Next 主题了：

//以下为原文件# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: landscape
//修改后# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: next

使用 hexo g 重新启动本地服务，发现风格确实变了。

主题配置

在 themes\next目录下的 _config.yml文件中，有几种样式选择

# ---------------------------------------------------------------# Scheme Settings# ---------------------------------------------------------------
# Schemesscheme: Muse#scheme: Mist#scheme: Pisces#scheme: Gemini

使用的时候，把前面的#去掉即可，重启服务后可生效。

Next还有许许多多的配置，这里提供 Next 主题的官方文档，是中文版的，有需要修改的同学可自行参考。官方文档：http://theme-next.iissnan.com/theme-settings.html 。

写文章

写文章时我们要先添加文件，此时假如我要添加一个名为Hello的文章：

hexo new Hello

此时在 source\_post目录下，创建了一个Hello.md的Markdown文档，打开来会有以下内容：

---title: Hellodate: 2020-02-20 13:53:48tags:---

这些内容是默认创建的，大家可以自行修改，比如：

---title: Hello wordauthor: A&Z categories: - GitHub搭建博客tags: - GitHub搭建博客date: 2020-02-20 13:53:48---

开头下方即可写博客，使用MarkDown格式。

这样Hexo在编译时可自动识别标题，类别等等。除此之外，还有很多别的参数，参考文档：https://hexo.io/zh-cn/docs/writing.html 。

另外，创建新文件时不一定要用命令行的方式，可以直接在目标目录下创建.md文档，这样Hexo也是可以编译的。

总结

在以上步骤都成功后，其实发布博客已经变得很简单了，大致步骤如下：

1、在目标目录下新建.md文档，按照MarkDown格式书写开头，再撰写推文，保存。

2、调整风格，先在本地 http://localhost:4000 试运行，直至调整到自己喜欢的效果。

3、上传到GitHub，Hexo会自动部署。

4、自己先上去看看，确保无误后即可分享给好友，拿出去炫耀一番了！

文章到这里就结束了，感兴趣的小伙伴们可以去尝试一下，做出一件大家都可以观赏的作品是多么幸福啊！

ps：

最近除了要上网课外，小编所在的准备参加robotmaster比赛的战队也开始了紧张的后期准备阶段，像我这样的菜鸟也要上战场磨练了，接下来应该是分享电控方面的知识，但是时间上的安排确实不好把握。不过我一定会在大家耐心耗完之前发推文的！

吧

今日推荐：

OxT - Silent Solitude.mp3 From CodeWing 03:28

vlambda博客
学习文章列表