Github 博客搭建

发表于 更新于 分类于 阅读次数：

…

经过几天的研究，我终于搭起了一个Github博客网站。这篇文章将从以下几个步骤分别介绍博客的搭建。

  1. 前期准备
  2. 环境部署
  3. 配置域名（可选）
  4. 配置到个人服务器（可选）
  5. 附录

1. 前期准备

首先，你需要拥有以下内容：

Github账号
个人域名（可选）
个人服务器（可选）

Github账号可以到Github官网申请，过程很简单，这里就不赘述了。
个人域名可以选择阿里云，腾讯云等域名产品，申请过程也就不说了，这个不是必选，有需要的可以搞一个。

2. 环境部署

这一步就正式开始搭建自己的博客了。首先是安装一些软件：

Git
NodeJS

Git的安装过程

首先到Git下载页面下载Git，这里建议下载64-bit Git for Windows Setup版本，涉及到一些环境变量的配置，安装版可以自动配置环境变量，省去手动配置的烦恼（32位系统则选择32-bit版）。

NodeJS的安装过程

到NodeJS下载页面下载NodeJS，可以选择Windows 安装包 (.msi) x64版，原因同上。

安装博客框架

可以选择Hexo，Jekyll等博客框架。这里以Hexo为例(参考文档，博客主题在这个官网中可以查看）。
打开终端，执行如下命令安装（这一步需要管理员模式）：

1
npm install -g hexo

在本地新建一个目录，执行init命令初始化Hexo和Git：

1
2
hexo init
git init

配置Github

创建一个Repository，名字必须为your_user_name.github.io。（加粗部分替换为自己的用户名）
下面配置SSH Key方便后续上传博客代码。
在本地Git Bash中输入如下命令建立SSH Key：

1
ssh-keygen -t rsa -C "邮箱地址" -f ~/.ssh/github_blog_keys

中间会提示你输入文件，密码，可以不用管，直接回车即可。配置成功后，打开生成的ssh-key，新生成的公钥就是~/.ssh/github_blog_keys.pub。到在自己的账户设置中，找到 SSH and GPG keys ，点击New SSH Key 添加新的Key。将刚刚生成的公钥文件中的内容复制这里即可。

之后我们需要配置自己的Username和Email：

1
2
git config --global user.name "your_user_name" 
git config --global user.email "your_email"

之后将本地仓库再关联到远程仓库，首先复制远程仓库地址，到Git Bash中执行下述命令，这一步要保证当前打开的路径是Hexo的路径：

1
git remote add origin https://github.com/your_user_name/your_user_name.github.io.git

配置Hexo

在Hexo目录下执行下面这句，安装该扩展程序。

1
npm install hexo-deployer-git --save

打开Hexo下的_config.yml文件，在文件末尾添加：

1
2
3
4
deploy:
  type: git
  repository: git@github.com:your_user_name/your_user_name.github.io.git
  branch: master

并修改title，url，theme等配置。

开始编写

下面就可以开始编写自己的博客了。
执行下面命令新建Hexo页面。

1
hexo new "HelloWorld"

之后会在项目的/source/_post/下看到HelloWorld.md文件，使用MarkDown语言编辑这个文件即可。编辑完毕保存退出，执行下述命令开始编译项目并上传：

1
hexo g -d

打开连接https://your_user_name.github.io 就能看到你的博客了。
也可以在本地看看效果：

1
hexo s

打开连接http://localhost:4000 即可看到效果。

3. 配置域名（可选）

首先得需要一个域名（还得是备案过的）。这里以腾讯云的域名为例。在云解析服务中，选择你的域名点击右侧的解析，进入域名的配置页面。点击上方的添加记录，主机类型可以选www或者@，记录类型选择CNAME，记录值为your_user_name.github.io. （注意末尾有个点），之后保存即可。
在你的项目中的/source/目录下创建CNAME文件，文件内容是你的一级域名，如下所示：

your_user_name.cn

保存编译上传项目，过几分钟后即可配置成功。
如果要开启HTTPS，则还需要购买SSH证书（有免费的证书），例如可以选择阿里云，腾讯云或CloudFlare的免费HTTPS服务。这里以腾讯云为例，选择为期一年的免费版SSH证书。
在云产品中找到SSH 证书管理，点击申请免费证书，选择左侧的免费一年的证书。按照上面的要求输入相关信息，点击下一步，等待几分钟审核通过（也可能好久）。
回到https://github.com/your_user_name/your_user_name.github.io 中，进入仓库设置页面，下拉找到GitHub Pages，在Custom domain中输入自己的域名，并开启Enforce HTTPS。

4. 配置到个人服务器（可选，Ubuntu版）

当然，首先需要一台个人服务器。配置过程主要分为几个步骤：

安装Git-core
安装Nginx
配置Https

首先安装Git-core和Nginx。登入服务器执行如下代码

1
sudo apt-get install git-core nginx openssh-server

安装成功后，开始配置Nginx。在这里我们可以使用SSL给网站加点安全措施。首先从腾讯云上下载SSL证书（笔者用Chrome下载证书时浏览器会崩溃，于是换了一个浏览器才下载下来），压缩包下会有Nginx版对应的证书。复制里面的证书到服务器上，这里可以使用xftp或MobaXterm的sftp上传，放到 /etc/nginx/cert 目录下。
在 /etc/nginx 下执行下述代码:

1
2
3
4
sudo cp sites-available/default sites-available/default-ssl
sudo ln -s sites-available/default-ssl sites-enabled/ssl
sudo rm sites-enabled/default
sudo vim sites-enabled/ssl

开始使用vim编辑刚刚得到的ssl文件，配置ssl访问，并设置80端口重定向到443端口。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
server {
  # SSL configuration
  listen 443 ssl default_server;
  listen [::]:443 ssl default_server;

  root /home/git/tmp/blog;
  # Add index.php to the list if you are using PHP
  index index.html index.htm index.nginx-debian.html;

  server_name www.your_domain.com;
  ssl on;
  ssl_certificate /etc/nginx/cert/your_crt_file.crt;
  ssl_certificate_key /etc/nginx/cert/your_key_file.key;
  ssl_session_timeout 5m;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
  ssl_prefer_server_ciphers on;

  location / {
    try_files $uri $uri/ =404;
  }
}

server {
  listen 80;
  listen [::]:80;

  location / {
    rewrite ^(.*)$ https://$host$1 permanent;
  }
}

配置完成后，记得在腾讯云的域名解析上添加一条A记录，来指向自己的服务器IP地址。完成后别忘了访问一下自己的网站，看看是否能够访问成功。
下面开始部署网站到自己的服务器上了。在自己的服务器上，首先搭建一个Git的服务器。首先将之前的github_blog_keys.pub中的公钥上传到服务器上，保存到 ~/.ssh/authorized_keys 文件中。在自己的服务器中创建git账号。

1
2
sudo useradd git
sudo passwd git

输入git账号的密码，之后登陆到git账号中，创建仓库。

1
2
3
4
5
6
su git
cd ~
git --bare init blog.git
# 这两步后面有用
mkdir tmp
mkdir tmp/blog

这里回到本地，先测试一下能否正常访问自己的git。

1
git clone git@your_server_ip:~/blog.git

成功后利用hexo将博客代码部署到自己的服务器上。首先先配置自己的_config.yml文件。打开_config.yml文件，修改deploy部分的代码：

1
2
3
4
5
6
7
deploy:
 -  type: git
    repository: git@github.com:your_user_name/your_user_name.github.io.git
    branch: master
 -  type: git
    repository: git@your_server_ip:~/blog
    branch: master

保存后使用hexo提交博客代码。

1
2
hexo clean
hexo g -d

这样就可以提交代码到服务器上保存了。但是目前网站依然是无法访问的，需要再编写一个自动部署网站的脚本。
进入服务器，进入到目录 /home/git/blog.git/hooks 下，创建提交后执行的脚本。

1
2
3
4
5
#!/bin/bash -l
GIT_REPO=/home/git/blog.git
TMP_GIT_CLONE=/home/git/tmp/blog
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE

创建完成后，修改一下权限，并重启Nginx。

1
2
3
chmod +x post-receive
chmod 777 -R /home/git/tmp/blog
service nginx restart

这次在客户端用hexo重新部署一次代码。

1
hexo d

到此结束，可以收工了。

附录A Hexo

常用命令

Hexo初始化

1
hexo init

编译到静态页面

1
2
hexo generate 
# 简写 hexo g

部署到Github上

1
2
hexo deploy 
# 简写 hexo d

使用本地浏览器查看 ( http://localhost:4000 )

1
2
hexo server 
# 简写 hexo s

创建新的Page

1
hexo new

配置主题 _config.yml

首先给Hexo配置一个主题，之后就可以在Hexo的主题的目录下看到_config.yml文件。
以NexT主题为例，目录下的_config.yml文件中有如下选项：

  • Site Information Settings 站点信息设置
  • SEO Settings SEO设置
  • Menu Settings 菜单设置，包括显示的栏目，栏目图标等
  • Scheme Settings 主题风格设置
  • Sidebar Settings 菜单栏设置，包括友情链接，个人头像，侧边栏位置等
  • Post Settings 主页文章显示设置
  • Misc Theme Settings 主题其他设置，字体，代码风格等
  • Third Party Services Settings 第三方服务，数学插件，评论插件，统计插件，搜索插件等
  • Tags Settings 标签设置
  • Animation Settings 动画设置

创建分类与标签

使用如下两个命令分别创建分类与标签：

1
2
3
4
# 创建分类
hexo new page categories
# 创建标签
hexo new page tags

创建完成后，需要在主题配置中开启相应的选项（例如NexT主题中的menu）。

安装插件

图片本地化插件

在Hexo目录下执行下面语句：

1
npm install https://github.com/CodeFalling/hexo-asset-image --save

之后配置根目录下的_config.yml中：

1
post_asset_folder:true

之后再创建文章的时候，就会同时在同一目录下创建一个与文章同名的文件夹，里面可以存放文章中使用到的图片。在文章中引用文件夹下的图片pic.jpg方法如下：

1
![image](pic.jpg)
评论插件

这里推荐两款评论插件，来必得与LeanCloud。
来必得支持多账号登录，但是评论数据无法导出，而LeanCloud是匿名评论，提供的对象存储支持每日30,000次请求，总共10GB存储。

搜索插件

这里使用Local Search，直接安装即可实现本地搜索。安装代码如下：

1
npm install hexo-generator-searchdb --save

回到博客的_config.yml中添加如下设置：

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

在主题的_config.yml中找到local_search，并启用该功能：

1
2
3
# Local search
local_search:
  enable: true
动态壁纸

线条背景：在主题文件夹下找到layout/_layout.swig文件，在</body>上方添加代码

1
2
3
{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}
Live2D插件

首先安装Live2D插件：

1
npm install --save hexo-helper-live2d

这里推荐到xiazeyu这里找一个喜欢的模型安装一下，我随便选一个为例：

1
npm install --save live2d-widget-model-hibiki

回到博客的_config.yml文件中，在最后添加代码，具体可以看EYHN里面的介绍：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  # enable: false
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-hibiki # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
pdf 插件

安装PDF插件：

1
npm install --save hexo-pdf

在主题配置文件next/_config.yml中找到PDF配置，打开开关。

1
2
3
4
5
6
7
8
9
pdf:
  enable: true
  # Default height
  height: 500px
  pdfobject:
    # Use 2.1.1 as default, jsdelivr as default CDN, works everywhere even in China
    cdn: //cdn.jsdelivr.net/npm/pdfobject@2.1.1/pdfobject.min.js
    # CDNJS, provided by cloudflare, maybe the best CDN, but not works in China
    #cdn: //cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js