我是怎么搭建这个Blog的

我开始想写一些东西。

在用一天对比了知乎、简书、Google blogger、Github Pages等一些国内外网站后,我决定使用Github Pages作为我的第一个私人博客。

又用了两天的研究和实验,我选择了 Hexo 来搭建属于我的 Github Pages。

九月九日夜九点,我在 windows laptap 上正式开始了从0开始的Blog搭建之路,花了两个小时完成了初步的搭建和主题安装。

我在九月十日的上午又花了三个小时完成了主题的初步修改和自定义域名的绑定,下午开始写这篇文章来整理下这次搭建。

Github Pages+Hexo的初步碰撞

准备

  • 下载 Node.js 和 Git
  • 用 Notepad++ 代替系统记事本
  • 拥有一个 Github 账号

开始

创建 Github Pages

登陆 Github 创建一个项目,命名为 username.github.io,GitHub 会自动为你创建一个 Github Pages,通过 username.github.io 可以访问。

Node.js

按照默认设置安装即可

Git安装和配置

  1. 按照默认设置安装即可

  2. Git –> Git Bash 弹出一个类似于 cmd 窗口的窗口

  3. 设置机器

1
2
$ git config --global user.name "Your Name"
$ git config --global user.email "email@example.com"
  1. 配置 SSH Key。

    1. 在用户主目录下查看是否有.ssh目录以及该目录下是否有id_rsaid_rsa.pub这两个文件

      • 有,进行4.2

      • 没有,打开 Shell(Windows 下打开 Git Bash),创建 SSH Key:

        1
        $ ssh-keygen -t rsa -C "youremail@example.com"
    2. 登陆 Github –> Accounting setting –> SSH Keys –> Add SSH Key –> 在 Key 文本框中粘贴id_rsa.pub的内容 –> Add Key

    3. 测试是否设置成功

      1
      $ ssh -T git@GitHub.com

      如果是下面的反馈:

      1
      2
      3
      The authenticity of host 'GitHub.com (207.97.227.239)' can't be established.
      RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
      Are you sure you want to continue connecting (yes/no)?

      不要紧张,输入 yes 就好,然后会看到:

      1
      Hi cnfeat! You've successfully authenticated, but GitHub does not provide shell access.

使用 Hexo 创建博客框架

Hexo 安装

在 C 盘根目录安装 Hexo,打开 Git Bash

1
2
cd /
npm install hexo-cli -g
Hexo 部署

打开 Git Bash

1
2
cd /
hexo init Hexo

部署成功后,可以在 Hexo 文件夹中打开 Git Bash进行本地预览

1
2
hexo g
hexo s

在浏览器输入 localhost:4000/ 可以进行本地预览,若输入hexo s -debug可进行实时预览。按 Ctrl+C 可停止预览。

将本地文件部署至 Github

Hexo 有两份主要的配置文件_config.yml,一份位于站点根目录下,另一份位于主题目录下。为了描述方便,在以下说明中,将前者称为站点配置文件,后者称为主题配置文件

修改站点配置文件

打开站点配置文件_config.yml,找到deploy标签进行修改

1
2
3
4
deploy:
type: github
repository: https://github.com/username/username.github.io.git
branch: master
deploy 至 Github

Hexo 根目录 Git Bash

1
2
3
hexo clean
hexo g
hexo d

如果出现下处错误

ERROR Deployer not found: github

deploytype: github改为type: git,再执行npm install hexo-deployer-git --save,再重新 deploy

1
2
3
hexo clean
hexo g
hexo d

期间可能会需要输入 Github 的账号密码

结束

deploy 成功后,便可以在 Github 的 username.github.io 的项目处看到本地Hexo\public文件夹的所有内容,打开 username.github.io 便可看到本地预览所见到的博客界面。

博客的初步搭建成功。

怎么写 Blog

写 Blog

  • Hexo 下 Git Bashhexo n "new",Hexo\source\_posts文件夹中会新建一个new.md,文章 title 为 ‘new’。
  • 将写好的 .md 文件添加到Hexo\source\_posts

发 Blog

Hexo 下 Git Bash

1
2
3
4
hexo clean
hexo g
(本地预览 hexo s)
hexo d

Blog 格式 tips

  • 可以在文章开始处添加title: date: tags categories description 等字段,字段与正文处需用分割线---分开
  • 在文章内容中添加 <!-- more --> 即可在首页显示时只显示其之上的内容,并获得一个 Read more 链接
  • 外链图片可以使用七牛图床

使用自定义域名

购买域名

我选择在 GoDaddy 购买域名,并且可以使用支付宝付款。

结账时可以去网上搜索GoDaddy优惠码。

绑定域名

Hexo\source 文件夹下新建 CNAME 文件,添加你刚刚购买的域名,保存后部署到Github。

注意:前面不要添加 http:// https:// www.等。

DNS设置

我选择使用 DNSPod国际版,添加域名并解析

其中A的两条记录指向的IP地址为 Github Pages 提供的IP,www 指定的记录是你在 Github 注册的仓库。

前往 GoDaddy 修改域名服务器为

1
2
3
a.dnspod.com
b.dnspod.com
c.dnspod.com

保存后等待几分钟,前往 username.github.io 便可跳转到你绑定的域名。

使用自定义主题

我使用的主题是 ahonn 开发的 even,下面便是一些我使用 even 的经验,不一定适合其他的主题。

开发者在 Document 中写的很详细,基本的安装、设置都有提到,但有些设置在 issues 中,我就在此做下补充。

  • 几乎所有的样式变量都在 source/css/_variables.scss 中,你可以在 source/css/_custom/_custom.scss 中添加同名样式变量自定义(格式与 _variables.scss 中相同,但不包含 !default)。

    例如字族、大小等都可以修改。