Mac 搭建个人博客:个人域名 + Hexo + Github Pages

总的来说:

  • 我是现在github上创建一个username.github.io形式的Respository
  • 下载Hexo(需要有Node.js)
  • 然后买了一个个人顶级域名
  • 接着把个人域名和Github Pages绑定
  • 最后把Hexo配置下

创建username.github.io

github上有一个账户后,创建一个新的Respository。如果这个Respository命名为自己github的用户名,github会自动创建Github Page:

Github规定每个账户只能存在一个对应用户名的Github Pages。

而后,在这个username.github.io的Respository的setting界面中,有关于Github Pages的配置。这里我们主要关注两个配置,

  1. Source: 一定是master分支或者是gh-pages分支。我的是直接就默认master分支了,并且不能更改了。这意味着,以后写的博客要pushgithub的时候,需要pushmaster分支中。
  2. Custom domain: 这个选择可以不动,但是如果想用自己的个人域名,就需要更改。否则就使用github.io后缀的域名。

关于Github,这篇博客后面内容还会用到…

下载Hexo

因为我是用brew指令下载的node.js,所以在我的Mac中,我是这样安装Hexo的:

环境准备:

  • 我的Mac环境里已经安装好Xcode(装好Xcode,默认装好了python)

  • 接着我也已经安装好了Homebrew这个套件管理器。具体安装请见Homebrew官网:https://brew.sh/ 很快很方便。

打开终端,输入命令

1
$ brew install node

然后可以用命令$ node -v来查看一下node.js的版本号

  • 接着,就可以安装Hexo了。Hexo官网:https://hexo.io
    1
    $ npm install hexo-cli -g

安装好后,需要初始化Hexo。

  1. 在某个路径中,创建一个文件夹,可以命名为 blog,然后用命令$ hexo init blog
  2. 在终端中跳转到刚才创建的文件夹路径中(在mac中,可以直接把文件夹拖到终端中,就可以得到完整的路径)。使用命令$ cd ..... 例如 $ cd /User/....../blog
  3. 然后用指令$ npm install, 最后输入$ hexo server,就可以在本地服务器localhost:4000里预览创建的静态网页。

Ps:还有其他的博客框架,如github自己的jekyll(基于ruby),还有新出的Hugo(基于Go)。因为还是新手,随趋势选了Hexo。各个框架的具体性能和用户体验,还不知道…

买一个个人域名

因为我现在在法国,所有我是在GoDaddy买的。国内可以在买阿里云。

以下以godaddy的域名购买和界面配置为例子。godaddy官网:https://www.godaddy.com 个人觉得,他的域名挺霸气的。。。

买域名的步骤:

注册账号 -> 搜索想买的域名 -> google或者百度 godaddy 优惠码 😏 -> 根据需要选择域名的年限,和配套服务(我买了5年的,其它的配套服务都没买…加了十几欧元的税-_-, 用了个折扣,最后还是58.75欧…)

付完钱,邮箱确认后,就正式有一个自己的个人域名了。现在输入域名,会发现,什么都没有…

买到的域名,要过两三天的样子才能在谷歌上搜出结果…另外,因为我的域名拼音和吃的东西相关,我屁颠屁颠的去百度上试着搜了下我的网站,然后返回一堆吃的东西-_-,翻了几页也找不到,所以这是说百度上搜不出我的博客了?

把个人域名和Github Pages绑定

买好个人域名后,现在我们回到Github

先贴一张成功绑定后的图:

我们要注意到的是,我绑定的网站默认建立在master分支。

  • 首先,在这个username.github.ioRespositorymaster branch的根目录下(直接转到branch分支,然后新建一个命名为CNAME的文件):

然后输入域名,注意没有httphttpswww前缀:

保存后,回到setting,应该可以看到在Custom domain这一栏里,自动添加了CNAME里的内容。

  • 下一步,我们要回到godaddy个个人页面。我们将要设置DNS,即域名解析。现在的godaddy的用户界面改了,变成扁平式的了…找到My Products -> Domains -> DNS:

我点进DNS后,发现已经有默认的A类型和CNAME类型的了。所以我是直接修改的。

Type A的Value里填的是IP地址,绑定Githug的话,需要填192.30.252.153
Type CNAME里的填是是域名,绑定Githug Pages,填的格式是username.github.io,对应每个人的username

设置好后,我们可以在终端里检验一下。根据github的方法,使用$ dig www.xxxx.com + nostats + nocomments +nocmd命令:

下图是我终端里的显示:

到现在,个人域名和Github Pages就绑定好了。

5.继续配置Hexo

剩下的步骤,就是配置Hexo,目的是让Hexo可以把文件push到git中,实现网页的更新。
还记得我们之前,在下载Hexo的部分中,创建了一个名叫 blog的文件夹吗?在这个文件夹里,有一个_config.yml的文件

注:在blog中的一个子文件夹themes里,也有_config.yml的文件,不过themes文件夹下的这个文件是配置主题的。这里我们需要配置的是blog根目录里的_config.yml。

打开_config.yml文件,拉到最下面找到deploy(或者 command + F,输入deply):

保存。
然后,为了让Hexo支持Deployer的git,我们还需要装一个东西。在终端输入:
$ npm install hexo-deployer-git --save

后面在博客中添加图片的时候,因为路径问题,在markdown,hexo还有github远程服务器中,由于在几个地方的路径不同,使得加入从本地添加图片到博客然后上传到远程比较麻烦。但我们也有办法解决:

首先,我们在跟目录下的_config.yml文件中,修改

并且找到post_asset_folder,更改为true

接着我们安装一个插件,https://github.com/CodeFalling/hexo-asset-image

当我们用$ hexo new "xxx"命令创建一个文件时,在blog/source/_posts目录下,会自动生成同样名字的文件夹,假设为example1文件夹(这个文件夹的路径为……/blog/source/_posts/example1)。

如果我们要在博客中添加图片,把本地的图片放到example1文件夹中。在写博客时,添加图片的格式是[](example1/1.png)

到现在,基本的环境就已经配置好了。

以后,

  1. 我们用 $ hexo new "title_name"来新建一个markdown 类型的文档
  2. $ hexo generate来生成或者更新相应的文档
  3. $ hexo deploy把生成的文件push到github对应的远程分支里。
    接着我们就可以在浏览器里,输入我们个人域名,看我们自己的博客(网页)。

我们可以用$ hexo s 或者 $hexo server 命令来启动hexo,然后在本地服务器localhost:4000预览网页。

当我们在本地修改博客后,可以用 $hexp genereate 来更新,此时可以在刷新本地服务器localhost:4000 后看到更改内容。

6. 补充

整的来说,我是在Mac上,以Hexo + Github Pages然后使用自己买的个人域名搭建的博客。然后我是用Macdown的编译器来写文章(写好后把.md格式的文件拷贝到blog文件夹下的source/_postes/路径下)

:关于写文章的编译器,有许多选择,以Mac为例,有Mou、Macdown、Typora、Sublime Text 3、Atom… 具体哪个,请根据个人爱好进行选择😏