转载

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

在开始之前就说过，必须去注册一个 Github 帐号…… 以下假定你已经注册好了。

想学什么，可以先假装已经会了什么…… 听起来很没道理，但你试试就知道了……

习得任何技能的最根本技巧，就是一句话而已： 马上开始像那些已经精通这个技能的人一样生活。

这是很重要的方法论，它会让你无视很多障碍，跨越很多障碍，甚至那些障碍对你来说就好像完全不存在一样。心理学家告诉我们，当你不开心的时候，假装开心，做出笑脸，过一会儿就没那么不开心了，甚至真的开心起来…… 这个原理其实可以用在很多地方，比如，某项技能你不会，但你想会，那就从假装会了这个技能开始，然后当真去做、去学，没多久就真的会了…… 我小时候学吉他也是这样，买来吉他其实是不会的啊，但也不知道为什么就是有欲望坐在那里乱弹一气，就好像会了一样 —— 可真的没多一会儿就开始渐渐调整自己，让手的拨动多少有点节奏…… 竟然比之前好听多了！

我们只不过注册了一个 Github 帐号而已，还装得不够像…… 让我们费一点周折，装得更像一点罢。

我从来都是这样的，装就装得真像 —— 这样后来就真的是了。你看，我有个网站： xiaolai.github.io ，你不妨打开看一看。接下来，你就跟着我一步一步地给自己搭建一个跟工程师们用的一样的个人网站。

这个过程其实不太费劲的，甚至很简单，相信我。但在这个过程中你也一定会七七八八学很多东西…… 你会感觉时间一晃就过去了 —— 因为你会在这个过程中一不小心就进入所谓的 “flow”（心流）。学习从来不是杀时间的方式，恰恰相反，学习是“时间加速器”，它会让时间一晃而过，却又与此同时增加了时间质量与密度 —— 你不可能没有感受的！

在这个过程中，我们会熟悉起来的东西包括

命令行工具的使用
Atom 的使用
如何书写 Markdown 文档

开始罢。

1. 初步搭建

1.1. 在 Github 上创建一个 Repo

在浏览器中登录 Github ，创建一个 Repo，名称格式为 yourname.github.io 。比如，我个人的 Github 账户用户名是 xiaolai ，所以，我的这个 Repo 的名称就是 xiaolai.github.io 。这个特殊的 Repo 有个审核过程，所以，创建完了之后，直接干下一步去……

1.2. 确认本地已经安装好 git 和 npm

在 Terminal 里（或者 iTerm 里）输入以下命令确认 git 与 npm 已经安装妥当（第一章完成了的话，这些已经安装好了，若是没完成，请退回完成再回来重新继续……）

git --version
npm --version

1.3. 安装 hexo

在 Terminal 中继续输入

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

1.4. 创建本地工作目录

去 Github 把你的 Repo 的 git 地址拷贝出来。

我的是 https://github.com/xiaolai/xiaolai.github.io.git
你的是 https://github.com/yourname/yourname.github.io.git （其中，yourname 应该换乘你的 Github 用户名）。

然后在 Terminal 面板里输入

cd ~/Public
git clone https://github.com/yourname/yourname.github.io.git

1.5. 初始化你的本地站点

hexo init yourname.github.io
cd yourname.github.io
npm install hexo-deployer-git --save
hexo generate
hexo server

这些完成之后，你就可以打开浏览器，在地址栏里输入： localhost:4000 ，在本地先看看网站是什么样子了。

1.6. 部署到 Github 上

回到命令行下，输入

atom .

Atom 就会打开 yourname.github.io 这个文件夹…… 在计算机世界里， . 是个特殊字符，代表“所有的”（以后你会越来越了解的），所以， atom . 的意思相当于“用 Atom 这个程序打开当前目录内的所有文件”……

在 Atom 的左侧面板中，选择 _config.yml 文件，找到 deploy 哪一部分，改成：

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

注意，把 yourname 改成你的 Github 用户名。

现在是最后一步了，在 Terminal 里依次输入：

hexo deploy
open yourname.github.io

1.7. 阶段性成果

稍等一下，你就可以看到默认浏览器被打开，且已经浏览到 yourname.github.io 这个网址了……（嗯…… 工程师们打开浏览流程的姿势都不太一样…… 对了，试试 open . 会发生什么？）

简单吧？！

不一定很简单 —— 对新手因为上面的过程中，每一个尽管相当简单的步骤，都可能出现各种莫名其妙的错误（比如，不小心使用了中文输入法的点字符“。”等等）…… 保持耐心，反复来过就好。

不妨再说一遍，因为这是工程师必备的素质（其实是任何人在任何领域都应该必备的素质）：

保持耐心，反复来过，直至成功。

2. 继续折腾

没完事儿呢…… 这才刚刚开始，你现在有了个个性化域名，有了个所有人都可通过它访问的站点，然后就要做起码两件事儿了：

学会在本地使用 Markdown 书写文章，而后发布到网上；
把站点装扮得更好看一些。

当然，这之前，我们还要学会做更多的事情，包括很多非常细琐的东西。反正我们不着急。

2.1 给 Atom 安装一个命令行面板

有一个 Atom Package，可以在 Atom 里调用 Terminal 面板，叫 platformio-ide-terminal 不妨装上玩玩。我是怎么想到找这个东西的呢？很简单，经常需要从 Atom 切换到 Terminal / iTerm …… 工程师们肯定也一样觉得麻烦，所以，估计他们已经有了解决方案…… 于是，到 Google 里搜索了一下：

terminal in Atom

果然有这种东西…… 希望你现在已经对命令行有一定了解了，没有的话，回去第一章再看看你找到的那个 Cheatsheet 罢，边看边练。

这是学习过程中必须学会的思考模式（Mindset）和行为模式（Action Pattern）：

随时准备深入了解某个小领域
借助地球上最强大的人工智能（Google）找到学习资源
给自己一小段时间刻意练习
不怕死记硬背，更要善于死记硬背，通过短时间内的大量重复，把那些别人看起来枯燥的东西迅速变成自己“内建的技能” —— 通过刻意练习将其熟练到“想都不用想就能用的地步”……
给自己定个“最后期限”，比如一小时之内一定做到把这些命令谙熟于心…… 绝对不能“过些天就想不起来了”，否则，那就是思考监管的“只因为学习习惯不好造成的永久性愚蠢”。

再提醒一遍，别忘了给自己洗脑：“ 只搜索、只阅读英文文档 ”，有中文的也不能看，就是不能看……

还有就是，每次脑子里闪出“呀，好麻烦！”这个念头的时候，就要知道自己脑子脏了，该洗了。无论干什么都挺麻烦的，怕麻烦的人什么都做不成，躲避麻烦的唯一正确方式就是“不怕麻烦，逐一完成”，否则就会反复麻烦一辈子又一辈子（甚至会遗传，不耐心的父母必然养出不耐心的孩子）。凡事道理都是一样的，我有一句口头禅：“偷懒的唯一方式就是不偷懒……” 也还是一样的道理。

2.2 为 Atom 安装 markdown 相关 Packages

Markdown 是程序员们最喜欢用的书写工具，是一种简化版的文字标记方式，你的 yourname.github.io 站点上的文章，就得用这种方式书写。怎么用、怎么写？Google github markdown 就知道了，别忘了在搜索一遍 github markdown cheatsheet ，嗯，这个基本上用不着刻意练习 —— 因为它太简单，另外也因为反正你以后天天用。

点击 Preference 的左侧倒数第二项 + install ，在搜索框中输入 markdown ，依次安装一下几个 Package：

markdown-scroll-sync
linter-markdown
markdown-writer
markdown-toc
markdown-pdf
markdown-preview

设置一遍 markdown-writer，你就知道应该如何设置其它的 Package 了。还是进入 Preference ，在左侧选择 Packages ，在右侧找到 markdown-writer ，点击 Settings 按钮…… 然后在里面上下翻一翻。在 Site Engine 里，竟然直接有个 Hexo 选项…… 真好！勾选罢！

另外，如果快捷键 ⌘ b 、 ⌘ i 之类的不起作用，那么可以把以下代码拷贝粘贴到 keymap.cson 文件中（在 Preference 中点击左侧第二项 Keybindings ，即可打开这个文件），随后用 ⌘ s 保存之后重新启动 Atom 即可（或者在 Command Palette 里使用 Windows: Reload 命令）。

# for markdown-writer
".platform-darwin atom-text-editor:not([mini])":
  "shift-cmd-K": "markdown-writer:insert-link"
  "shift-cmd-I": "markdown-writer:insert-image"
  "cmd-i":       "markdown-writer:toggle-italic-text"
  "cmd-b":       "markdown-writer:toggle-bold-text"
  "cmd-'":       "markdown-writer:toggle-code-text"
  "cmd-k":       "markdown-writer:toggle-keystroke-text"
  "cmd-h":       "markdown-writer:toggle-strikethrough-text"
  'cmd->':       "markdown-writer:toggle-blockquote"
  'cmd-"':       "markdown-writer:toggle-codeblock-text"
  "ctrl-alt-1":  "markdown-writer:toggle-h1"
  "ctrl-alt-2":  "markdown-writer:toggle-h2"
  "ctrl-alt-3":  "markdown-writer:toggle-h3"
  "ctrl-alt-4":  "markdown-writer:toggle-h4"
  "ctrl-alt-5":  "markdown-writer:toggle-h5"
  "shift-cmd-O": "markdown-writer:toggle-ol"
  "shift-cmd-U": "markdown-writer:toggle-ul"
  "cmd-j cmd-p": "markdown-writer:jump-to-previous-heading"
  "cmd-j cmd-n": "markdown-writer:jump-to-next-heading"
  "cmd-j cmd-d": "markdown-writer:jump-to-reference-definition"
  "cmd-j cmd-t": "markdown-writer:jump-to-next-table-cell"

注意

在 Atom 里， ⌘ k 默认被设置成了一些双组合键的第一个，比如，你按过一次 ⌘ k 之后再按右方向键 → 的话，你当前的输入区域就会在一个新生成的右侧面板（Right Pance）上打开一份…… 所以，你想输入这样的文字之时：

你的按键顺序是这样的（最后一个 ⎋ 是键盘最左上角的 esc 键盘）

k ， ⇧ ← ， ⌘ k ， ⎋

2.3 学习使用 markdown 书写文章并发布

这次我们走另外一个路径。关掉所有程序，重新来过。用 Spotlight 打开 Terminal，输入

cd ~/Public/yourname.github.io

输入方法是这样的：输入 cd ~/Pu 之后，就按一下 ⇥ （Tab 键），应该能自动补全为 cd ~/Public/ ，接着再输入 yourname …… 其实可能输入前两个字符的时候已经可以用 ⇥ 完成自动补全了。补全之后，就可以直接按 ⏎ （回车键）进入你的目标目录了。

然后再输入命令：

atom .

进而用 Atom 打开当前目录中的所有文件。

在右侧的面板里展开 source 目录，进一步再展开 _posts 目录，点击 hello-world.md 文件，正文编辑器里所显示的就是你现在能在网站上看得到的 hello-world 的源文件了。

随便在那里面写任何内容，用一下你已经习得的 markdown 标记，玩玩。由于已经安装了 markdown-preview，所以在书写 Markdown 文档的时候，随时可以用 ⇧ ⌃ m 呼出预览，甚至可以实时更新预览。（不过，预览的时候和最终发布的时候看起来稍微不一样，自己体会一下……）

然后就可以在 Terminal 面板中用 hexo generate 生成静态 html 文件，用 hexo server 本地查看（在浏览器中用这个地址：localhost:4000），或用 hexo deploy 发布到 yourname.github.io 上去……

以后你想发表博客文章的时候，无非就是在 source 目录中创建新的 .md 文件，而后 hexo generate ，之后再 hexo deploy .

2.4 一旦发现需要重复的工作……

—— 就要马上想办法要么 1) 自动化 ，要么 2) 减少工作量 。这是工程师的思考行动方式，在工程师的世界里，懒惰有另外一种用处，是积极的用处：它是用来刺激寻找提高效率的手段。普通人懒起来就什么都不干了；工程师懒起来就使劲琢磨：

“怎么做才能将来不用做或者起码少做却可以实际上干更多呢？”

注意：“ 实际上干更多 ”才是重点！

反复地敲 hexo generate 、 hexo server 、 hexo deploy 好累啊！怎么办？我们可以给命令行里反复输入的命令编制缩写……

命令行下输入，其实就是用 Atom 打开 ~/.aliases 文件：

atom ~/.aliases

在该文件下输入以下内容：

alias hgs="hexo g&&hexo s"
alias hgd="hexo g&&hexo d"

重新启动 Terminal 之后，只要输入 hgs 就是生成内容之后在 localhost:4000 里预览，输入 hgd 就是部署到服务器上……

能这么做的原因在于之前在配置开发环境的时候输入过这么三个命令：

https://raw.githubusercontent.com/donnemartin/dev-setup/master/.bash_profile
curl -O https://raw.githubusercontent.com/donnemartin/dev-setup/master/.bash_prompt
curl -O https://raw.githubusercontent.com/donnemartin/dev-setup/master/.aliases

.bash_profile 文件里引用了 .bash_prompt 和 .aliases ，每次启动 Terminal 的时候，它都会引用 .bash_profile 里的设置，所以，以后你就可以把所有你需要的缩写都放到 .aliases 文件里去。

比如我这个懒蛋就用来好几个这样的缩写：

alias -="cd -"
alias ~="cd ~"
alias ..="cd .."
alias ...="cd ../.."
alias ....="cd ../../.."
alias bp="atom ~/.bash_profile"
alias bpr="source ~/.bash_profile"

所以，我需要修改 ~/.bash_profile 文件的时候，就在 Terminal 里输入 bp ，修改完了之后，保存好，然后在 Terminal 里输入 bpr 就行了，不用为了更改生效而重启 Terminal。