关于本文
写本文主要是为了记录下我在Mac系统下利用Hexo搭建Github个人博客的全流程,梳理下刚刚踩过的坑。
什么是Hexo
搭建网站和博客的程序有很多,搭建难易程度各不相同。比如用户规模非常大的老牌博客系统Wordpress,还有小众程序Typecho。先介绍下Hexo:
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
以上介绍来自Hexo官网,已经很明确的表明了Hexo的两个特点:轻量、Markdown。
- 轻量
不用多说,采用Hexo建立需要掌握一定的代码基础和动手折腾能力。 - Markdown
Markdown是一种非常流行的轻量标记语言,语法简单易掌握,很受欢迎。
什么是Github
GitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub。目前已经被微软花了75亿美元的股票交易收购。
你肯定会问题,为什么不自己买服务器来建立个人博客呢?至少有三个优点:
- 免费
免费不用说了,一个国内入门级的空间至少一年也要200到300块; - 免备案
买国内服务器备案是标配,至少要花掉一个月的时间审核备案; - 支持自定义域名
免费空间还支持自定义独立域名,可用空间高达1G没得说。
不过唯一要担心的就是Github的可用性,目前微软收购后,据我观察,可用性还是非常高的。
回归正题来利用Github搭建个人博客
首先需要准备的资料
- 任何一台macOS系统的电脑(本文只介绍macOS环境下搭建流程);
- 已经拥有Github账号
如果还没有可以重新注册,注册地址The world’s leading software development platform · GitHub,全站暂无中文,可以借助Google翻译来了解注册流程,很简单。
注册成功后,从右上角进入仓库-新建仓库-仓库命名一定要命名成username.github.io
“username”就是你的Github地址,这个必须按照这个要求来注册,否则可能会出现问题。 - 安装Xcode,node.js和nvm
这三个东西你都可以把他们理解为macOS下的环境配置。
Xcode直接在Mac App Store上搜索下载,node.js当然也可以去他们的官网(支持中文)上下载安装,附上中文官网下载地址:Node.js,下载后一路图形化界面安装即可。
nvm安装是在macOS的终端里安装,这是官方网址:GitHub - creationix/nvm: Node Version Manager - Simple bash script to manage multiple active node.js versions
安装代码如下(版本更新链接会做改变):
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
以上环境都配置OK之后,主要就是安装Hexo,上传到Github的工作了。
安装Hexo博客系统
以下的安装工作基本上都是在macOS的终端里完成,需要掌握一定的代码阅读能力,可以借助搜索引擎。
- 安装Hexo
npm install -g hexo-cli
- 为了后面把Hexo发布到Github上,同时安装hexo-deployer-git
npm install hexo-deployer-git --save
Hexo官方安装指导手册:文档 | Hexo
- 选定Hexo博客本地存放位置
比如我把它放在电脑的文稿位置:/Users/bobo/Documents/bobo.ink
,bobo.ink是我的博客根目录文件夹。选定并建立相应的文件夹之后,在终端里利用cd命令cd /Users/bobo/Documents/bobo.ink
来定位并访问博客根目录。你也可以在终端里输入cd加空格,同时利拖拽来获得文件夹绝对地址也可以。当终端定位到该目录后,接下来的操作基本上也就在这个目录下进行了。 - 首先执行命令:
Hexo init
执行命令完毕后,该命令将在当前目录下生成一套标准的Hexo博客项目模板。
生成可访问网站
上面的一顿操作虽然猛如虎,但其实只是在本地博客文件夹里生成了一源代码文件。后期需要对这些文件进行个性化代码修改,比如主题更换。
- 生成HTML格式页面
生成服务器可识别的标准HTML网站目录,此时可使用该命令:
hexo g
执行完毕后,在public目录下可看到我们自己书写的博客文档(.md文件)与所选的博客主题模板链接组合,生成的最终静态网站文件,该目录也差不多就是之后发布到GitHub上的实际文件(实际发布到GitHub的是.deploy_git目录),外部的网站“源代码”不会上传到github.io库。
启动本地服务器
启动本地服务器命令行可即时查看网站运行效果:
hexo s
Hexo的本地访问地址:http://localhost:4000。
本地服务器可以用来调试主题和其它界面,其实也没啥大用,最终还是要上传到Github上来维护的。但是启动后如果想要停止本地服务器访问,可以直接在终端里按Ctrl(control)+C。
更新主题
首先我们可以在Hexo官网:Themes | Hexo寻找适合我们的主题,然后下载下来,解压并放到本地博客文件夹themes
下,如比新主题的文件夹名称是newboy,那么我们就文件夹_config.yml
重新根据新主题构建博客:
hexo g
分享十个在Github上最受欢迎的主题模板(以star数量计):
下面贴出github上star数量最多的前10个主题(截至目前为止):
GitHub - iissnan/hexo-theme-next: Elegant theme for Hexo.;
GitHub - litten/hexo-theme-yilia: 一个简洁优雅的hexo主题 A simple and elegant theme for hexo.
GitHub - TryGhost/Casper: The default personal blogging theme for Ghost
GitHub - wuchong/jacman: Jacman is a fresh looking and responsive theme for Hexo with more features based on Pacman.
GitHub - A-limon/pacman: Pacman is a flat and responsive design theme for Hexo.
GitHub - daleanthony/uno: Uno - a minimal, responsive theme for Ghost
GitHub - orderedlist/modernist: A Theme for GitHub Pages
GitHub - presscustomizr/hueman: Hueman WordPress Theme
GitHub - kathyqian/crisp: A minimalist, responsive, and open-source theme for Ghost
GitHub - xiangming/landscape-plus: 针对中国大陆地区对hexo官方主题landscape进行优化。
创建github ssk密钥
- 生成新的SSH Key
ssh-keygen -t rsa -C "your_email@example.com"
其中your_email@example.com
是我们在GitHub注册时使用的邮箱。
- 成功运行后终端显示如下:
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/xxx/.ssh/id_rsa):
- 接下来提示我们保存
.ssh/id_rsa
的路径,一路回车。
Created directory '/Users/xxx/.ssh'.
Enter passphrase (empty for no passphrase):
当使命行提示输入 passphrase,为了避免“失误”和“麻烦”,建议直接回车,不设置密码。
- 成功后应该显示:
Your identification has been saved in /Users/xxx/.ssh/id_rsa.
Your public key has been saved in /Users/xxx/.ssh/id_rsa.pub.
The key fingerprint is:
16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48 your_email@example.com
The key's randomart image is:(后面图形省略)
- 添加Key到Github的SSH设置里
还记得我们已注册过Github了吧?通过右上角的设置
访问SSH and GPG keys
页面,通过绿色按钮New SSH Key
新建SSH。其中Title
随意命名,能帮助你区别和记忆就好。Key
里直接输入复制来的id_rsa.pub
里的所有内容。 - 如何复制
id_rsa.pub
里的内容,请打开 id_rsa.pub,终端命令:
vim ~/.ssh/id_rsa.pub
或者直接通过命令复制全部内容:
pbcopy < ~/.ssh/id_rsa.pub
- 检测SSH key:
ssh git@github.com
- SSH key 成功访问 GitHub则显示:
Hi your_name! You've successfully authenticated, but GitHub does not provide shell access.
Connection to github.com closed.
- 修改博客配置文件_config.yml并添加以下内容:
type: git
repo: GitHub上传仓库的完整路径,如 https://github.com/wavky/wavky.github.io.git
branch: master
发布博客到Github
- 重新更新并生成博客:
hexo g
- 通过命令发布博客:
hexo d
- 或者两个命令一起执行:
hexo g -d
绑定独立域名
GitHub Pages 默认提供的是 GitHub用户名.github.io作为博客访问地址,我们可以设置绑定自定义域名。
- 首先,在博客项目目录的
source
文件夹中,创建一个CNAME文件,存储预备使用的个人域名,如:
# 在source目录下
echo bobo.ink > CNAME
- 清理Hexo缓存并重新生成发布:
hexo clean
hexo g -d
- 在Github刚刚创建的仓库项目里,在设置
Setting
界面,滚到GitHub Pages
部分Custom domain
确认域名无误。 - 同时到域名所在的域名服务商设置DNS:
-
以阿里云为例,进入DNS设置界面,追加一条CNAME记录,详细如图:
BOBO.IMG.0001.png
如果一切顺利的话,咱们应该已经可以使用独立域名访问我们的博客了。
如何维护和更新博客
以下是发布博客文章常用的命令:
$ hexo new(n) //写文章
$ hexo generate(g) //把文章生成页面
$ hexo server(s) //启动本地服务调试
$ hexo deploy(d) //部署到github 可与hexo g合并为 hexo d -g
用hexo发表新文章
打开macOS终端,cd定位到本地博客文件夹,输入如下命令:
$ hexo n "你好世界"
- 直接发布新文章
其中“你好世界”为文章标题,执行命令 hexo n “你好世界” 后,会在项目 \本地博客文件夹\source_posts 中生成 你好世界.md文件,用编辑器打开即可编写正文内容。
写完后,推送到服务器上,执行以下命令即可在我们的站点看到新的文章。 - 在草稿箱撰写文章
- 上面的命令是直接发布文章,现在我们也可以先写文章放在草稿箱,暂时不发出去。通过命令行:
hexo new draft 你好中国
我们会在source下看见一个新的文件夹,_drafts,这个里面会装我们所有的草稿文件。
- 那写好了的草稿,如何可以在不发布的情况下,预览一下文章在网站上的样子呢?预览下草稿:
hexo server --draft
当然,你要先shut down原来开着那个server,才可以开启新的server。这样,我们就可以预览草稿文件是否合适了。
- 发布草稿内容
当我们准备好发布草稿时,我们可以运行命令:
hexo publish 你好中国
- 发布Normal Page
这里的Normal Page类似其它博客里的“关于我们”之类,利用命令新建:
hexo new page 关于我们
这个命令会在source文件夹内创建出”关于我们“”文件夹,只能通过链接访问。
用Markdown写文章
我们都知道Hexo支持Markdown标记语法,那么我们自然可以直接利用Markdown编辑器撰写文章,保存为.md格式的文件,存在source文件夹里,然后执行命令:
hexo d -g
这样一篇文章就可以发布到我们的个人博客下了,放心写起来吧:)
网友评论