hexo博客搭建和配置

原文地址

前言

从工作开始，一路过来都是在学习。由于不是计算机专业，所以只能比其他人更勤奋才行。从刚进公司学习.net，到后来业务需要而接触web前端、cordova、H5等，各种全新的知识给我带了极大的冲击。感觉接触到的知识太乱，天天都是在迷迷糊糊中学习忘记，忘记学习。后来决定开始做一些备忘，于是就在博客园上开始记录一些东西。用了一段时间后，觉得在博客园上编辑太繁琐，翻出来查看时太麻烦，再加上刚接触Markdown，所以很想直接用Markdown来编辑记录，于是找到了Hexo + GitHub Page建立个人博客。

准备

• 硬件：MacBook Pro
• 软件：Git + Node.js + homebrew + GitHub帐号

以上准备请自行百度，这里不赘述

创建GitHub仓库

1. 注册帐号（此步跳过）

2. 创建代码库

屏幕快照 2016-07-12 16.47.57.png

3. 填写信息

填写信息.png

4. 填写完后，创建成功后出现如下页面：

屏幕快照 2016-07-12 16.54.45.png

5. 设置，开启gh-pages功能

点击右上角的Settings，向下拖动，直到看到下图：

屏幕快照 2016-07-12 16.55.12.png

点击 “launch automatic page generator”，开启gh-pages功能

6. 生成默认github Page

屏幕快照 2016-07-12 18.44.31.png

7. 随便选择默认主题

屏幕快照 2016-07-12 18.53.52.png

配置SHH

打开GitHub，点击页面上方的齿轮按钮进入设置界面，点击左边的SSH keys，添加一个SSH keys。SSH keys的好处是让我们以后在本地进行操作并同步到GitHub上时不用输密码，那么如何配置SSH keys？

1. 创建SSH Key

   • 打开终端,输入 ssh-keygen -t rsa -C "[email protected]" 邮箱更新为自己的
   • 回车保存默认位置
   • 输入密码,用来加密私钥(以后就要用这个密码)
   image
   • 密钥存放在主文件夹的.ssh文件夹内
   • 打开文件备份 id_rsa(私钥) ; id_rsa.pub(公钥)两个文件,打开公钥,复制所有内容

2. 与远程仓库绑定

   • 在远程服务器,如coding/github页面内找到添加公钥选项,粘贴刚刚复制的内容,添加即可.
   

   add-key.png

3. 测试是否配置成功：

   ssh -T [email protected]

   如果返回的结果如下：

   

   屏幕快照 2016-07-12 22.40.58.png

   输入yes，就能看到

   

   屏幕快照 2016-07-12 22.42.01.png

   这样你的SSH key就配置完成了。

   到这里github仓库已经建好了。接下来是本地部分了。

Hexo

1. 创建文件夹

   在自己认为合适的地方创建一个文件夹

2. 安装Hexo

   打开终端，cd 到当前文件夹

   

   屏幕快照 2016-07-12 20.18.23.png

   输入 sudo npm install hexo-cli -g ，回车

   在命令行前面多加 sudo 是为了获取权限，可能需要密码（Mac才需要）

   

   屏幕快照 2016-07-12 20.20.32.png

   安装全局的hexo，可能你会看到一个WARN，但是不用担心，这不会影响你的正常使用。

   然后输入 sudo npm install hexo --save ，回车

   然后你会看到命令行窗口刷了一大堆白字，可能时间会比较久（若一直不行，请看最后面）。

   

   屏幕快照 2016-07-12 22.00.56.png

   最后输入 sudo hexo -v

   验证是否安装完成

   

   屏幕快照 2016-07-12 22.02.59.png

3. 初始化Hexo

   接着上面的操作

   输入sudo hexo init

   然后再接着

   输入 npm install

   之后npm将会自动安装你需要的组件，只需要等待npm操作即可

   文件夹目录中最少含有以下几项：

   

   屏幕快照 2016-08-01 22.20.35.png

4. 操作Hexo

   输入 sudo hexo generate，回车,也可以简写成 sudo hexo g

   生成静态文件。

   

   屏幕快照 2016-07-12 22.45.52副本.png

   输入 sudo hexo server，回车,也可以简写成 sudo hexo s

   启动服务器。默认情况下，访问网址为： http://localhost:4000/这时候，可以复制网址，打开浏览器，浏览到你刚建完的本地静态网站

5. 部署网站

   修改配置，打开文件夹中的 _config.yml，这里说必须更改的项目

   • url(网址)

       url: https://a418120186.github.io/
       root: /Lion/
       permalink: :year/:month/:day/:title/
       permalink_defaults:
     

   • deploy(部署)

       deploy:
         type: git
         repo: [email protected]:a418120186/Lion.git
         ##在github对应项目中复制，选择shh和http都行
         branch: gh-pages
     

   以上两个是部署前必须配置的，其他配置详见官网文档

   然后输入 sudo hexo deploy，回车,也可以简写成 sudo hexo d

   随后按照提示，分别输入自己的Github账号用户名和密码，开始上传

   

   屏幕快照 2016-07-12 22.44.45.png

   然后通过https://a418120186.github.io/Lion/（更换为自己的地址）来访问刚刚上传的网站

6. 常规操作

   • 打开Hexo目录下的source文件夹，所有的文章都会以md形式保存在_post文件夹中，只要在_post文件夹中新建md类型的文档，进行编辑。

   • 编辑完成后，执行sudo hexo g渲染成网页。

   • 再执行sudo hexo d部署新文件，这样就完成了一个操作。

   • 新建的文章头需要添加一些yml信息，如下所示：

     

     屏幕快照 2016-07-12 21.17.57.png

7. 更换主题

   • Hexo Themes - http://hexo.io/themes/，选择喜欢的主题，复制github地址(这里以Next主题为例)

   • 输入sudo git clone https://github.com/iissnan/hexo-theme-next.git themes/next

   将主题克隆到themes文件夹

   • 修改_config.yml中的主题配置为：theme: next

   • 然后先执行sudo hexo clean，然后重新sudo hexo g，并且sudo hexo d，很快就能看到新主题的效果了~

相关知识

1. 常见问题

   修改配置文件时注意YAML语法，参数冒号:后一定要留空格

   中文乱码请修改文件编码格式为UTF-8

2. 勤学勤练Markdown

   本地+云端备份数据是一种习惯

   Markdown学习路径 - http://wsgzao.github.io/post/markdown/

3. 使用性感的文本编辑器

   工欲善其事必先利其器

   Sublime Text - link

   Cmd Markdown - link

   大神整理的软件 - link

4. 若遇见卡住不往下执行现象，更换 npm 为 cnpm

   cnpm是淘宝提供的npm中国镜像加速，cnpm不仅可以加速npm上包的下载，也提供了镜像加速Node.js 源码的下载。https://npm.taobao.org/

   npm install -g cnpm --registry=https://registry.npm.taobao.org #可能需要sudo

   然后把上面包换npm的命令行都改为下面这种形式：

   sudo cnpm install -g hexo-cli