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

发表于 | 分类于   |   944 words

不废话，直接上货。

初步搭建

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

终端输入：

npm install hexo -g
npm install hexo-cli -g

Step4. 创建本地目录

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

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

Step5. 初始化本地站点

终端输入：

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

终端输入：

atom .

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

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

command+S 保存。

最后，在终端输入：

hexo deploy
open yourname.github.io

稍等一下，就可以看到你的个人网站了！给自己点个赞吧：P

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

更换主题

Step1. 选择你喜欢的主题

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

Step2. 安装主题

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

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

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

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

修改文档的_config.yml（注意，不是theme下的_config.yml文件），启用新主题

theme: {theme-name}

发表文章

  • 新建文章

    hexo new {postname}

  • 编辑文章,使用markdown格式

  • 生成文件并部署

    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部分，修改如下：
disqus:
  enable: true
  shortname: {your_website_short_name}
  count: true

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

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

Happy posting!

参考资料