使用Hexo在GitHub上为自己搭建一个静态Blog站点

不废话,直接上货。

初步搭建

Step1. 在GitHub上创建一个Repo

登陆GitHub,当然没有账号的话,注册个。

创建一个Repo,名称格式为yourname.github.io, 这里要注意,yourname 不是你随随便便起一个的,要和你GitHub的账户名保持一致,不然后面你会发现无法部署。

Step2. 本地安装git , npm

这里以homebrew为例来说明安装git, npm的方法,你也可以通过其他方式来安装。

安装Xcode和Homebrew:

  • Xcode:在App Store中下载,建议关闭VPN,以免下载速度过慢

  • Homebrew:在终端输入

    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    回车, 安装过程中,会被问到系统密码,此时只管输入密码,回车即可。

    了解更多,参见:Homebrew 的官方网址

安装git , npm 并确认安装成功:

  • 安装 npm
    • 终端输入:brew install node,休息下,等它安装完毕;
    • 输入:node -v , npm -v会显示版本号,表示已经安装成功;
  • 安装 git
    • 终端输入:brew install git, 同样的,等安装完成;
    • 输入:git --version,显示git的版本,安装完成。

Step3. 安装hexo

终端输入:

1
2
npm install hexo -g
npm install hexo-cli -g

Step4. 创建本地目录

去GitHub复制你Repo的git地址,然后在终端输入:

1
git clone https://github.com/yourname/yourname.github.io.git

Step5. 初始化本地站点

终端输入:

1
2
3
4
5
6
hexo init yourname.github.io
cd yourname.github.io
npm install hexo-deployer-git --save
git init
hexo generate
hexo server

此时,可以打开浏览器,输入:localhost:4000, 可以在本地看到网站的样子。

Step6. 部署到GitHub

终端输入:

1
atom .

Atom打开后,按快捷键command+P,搜索_config.yml文件,在文件的下面,会看到deploy部分,修改如下:

1
2
3
deploy:
type: git
repo: https://github.com/yourname/yourname.github.io

command+S 保存。

最后,在终端输入:

1
2
hexo deploy
open yourname.github.io

稍等一下,就可以看到你的个人网站了!给自己点个赞吧:P

好,大功告成!下面我们来装饰一下,让它变美美哒。

更换主题

Step1. 选择你喜欢的主题

hexo默认的主题是landscape,其实界面也还可以,不过就好比Mac自带了safari,但我们总想用用chrome啥的,所以,点击Themes, you may find something cool. 找到你钟意的那一款吧。

Step2. 安装主题

选中主题后,点击目标主题,会跳到相应的GitHub repo 中,可以按照GitHub 上的指示进行安装,或者在终端输入:

1
git  submodule add {theme-github-url} themes/{theme-name}

复制主题下的_config.yml.example,命名为_config.yml

1
cp themes/{theme-name}/_config.yml.example themes/{theme-name}/_config.yml

修改文档的_config.yml(注意,不是theme下的_config.yml文件),启用新主题

1
theme: {theme-name}

发表文章

  • 新建文章

    1
    hexo new {postname}
  • 编辑文章,使用markdown格式

  • 生成文件并部署

    1
    hexo generate -d

添加评论功能

这里我们用Disqus。

注册Disqus

  • 登录后,点击首页的 GET STARTED 按钮,然后选择 I want to install Disqus on my site
  • 在弹出的Create a new site窗口中,填写你的Website Name, 也就是你的short name,后面会用到,点击create Site
  • 创建完成后,在新页面点击Install Disqus, Platform选择Universal Code,拉到最下面点击按钮即可
  • 点击Configure Disqus,将Website Name改为你想要的名称,URL设置为你的Github page地址https://yourname.github.io

配置Hexo

  • 修改theme下的_config.yml,找到 disqus部分,修改如下:
1
2
3
4
disqus:
enable: true
shortname: {your_website_short_name}
count: true

short name就是之前你在Disqus中生成的short name

  • 终端输入:hexo g -d
  • 刷新你的网站,Disqus可见

Happy posting!

参考资料