Hexo+Github Page 博客搭建

发表于   |     |    阅读次数

前言

一直以来都想搭建一个个人博客，由于不懂web技术，迟迟没有动手去做，所以一些文字记录都是保存到印象笔记这种第三方平台
折腾期间，陆续接触了Ghost , Hexo 并将这两个博客都搭建了一遍，最后还是选择了Hexo

原因如下:

  • Hexo 能免费托管到Github page 上面
  • 不需要数据库支持
  • 每篇博客是一个独立的Markdown 文件
  • 能够导出静态页面,部署到任意地方

准备环境

本文记录的搭建过程并不是从零开始，基于以下环境

  • Mac OSX 10.11
  • git (安装xcode 会自动安装)
  • github 配置完毕
  • nodeJS

安装Hexo

打开终端 control+space 呼出spolight 搜索terminal 快捷打开

1
$npm install hexo-cli -g

初始化博客工作目录

在桌面新建一个Hexo文件夹 打开终端 cd 到Hexo

1
2
3
$hexo init blog
$cd blog
$npm install

此时blog目录如图所示

  • npm_modules 是hexo 依赖的一些模块 npm install 的时候进行安装
  • _config.yml 是hexo 的全局配置文件 （主题，语言，发布等等）
  • source 我们的工作目录,我们的每一篇博客都以单独的Markdown文件保存到source/_posts里面
  • themes 保存我们下载的各种主题

预览博客

1
2
$hexo g        
$hexo s

hexo g 将我们所有的博客文件 主题配置等等 生成一系列静态页面,此时blog 目录下面会出现public文件夹 保存生成的静态html 页面

hexo s 运行本地服务

此时用浏览器访问 http://localhost:4000/ 会打开我们的博客页面，此时默认有一篇博客hello world

创建一篇博客

1
$hexo n "Hexo+Github Page 博客搭建"

进入source/_posts打开 Hexo+Github Page 博客搭建.md
这里我们使用mac 平台下的Markdown 编辑器 Mou 进行编辑
编辑完成后保存即可
接着我们预览刚刚编辑的博客

1
2
$hexo g
$hexo s

此时用浏览器访问 http://localhost:4000/ 会出现我们新添加的博客

每次编辑完成后需要 重新生成 然后再启动web服务进行预览我们可以使用组合命令

1
$hexo s -g

更换主题

这里我们以Next 主题为例

下载主题

1
2
$cd themes
$git clone https://github.com/iissnan/hexo-theme-next.git

下载完毕后themes文件夹里面 增加了hexo-theme-next文件夹

启用主题

打开blog目录下的 _config.yml
修改theme 一栏为

1
theme: hexo-theme-next

注意中间一定要有空格
找到language 修改如下

1
language: zh-Hans

执行如下命令

1
2
3
$hexo clean
$hexo g
$hexo s

再次访问 http://localhost:4000/ 我们的博客已经切换到next 主题

发布

到目前为止我们所有的预览都是建立在本地的serve上的，其他人并不能访问到我们的博客，我们接下来要做的就是将我们的博客发布到Github page 让所有人都能访问

Github Page

每一个Github 账号都能创建一个特殊的Repo
这个Repo的名字是 Github 的用户名
这个Repo的Master 分支根目录里面的index.html 可以通过域名repoName.github.io来进行访问
详细的关于github page 的内容可以点击 Github pages

发布博客

首先我们要修改_config.yml 告诉hexo 该发布到哪个平台
打开blog 根目录的 _config.yml 修改 deploy

1
2
3
4
deploy:
  type: git
  repo: https://github.com/bucengyongyou/bucengyongyou.github.io.git
  branch: master

安装 一个hexo 扩展 hexo-deployer-git

1
$npm install hexo-deployer-git --save

发布命令

1
$hexo d -g

如果我们是第一次使用，可能会提示我们输入Github 账号密码
成功之后我们打开bucengyongyou.github.io就能看到我们的主页了

图床

之前并没有接触过这个概念,所谓图床就是

就是专门用来存放图片，同时允许你把图片对外连接的网上空间

由于使用hexo 写博客的时候 引用本地图片比较麻烦，并且将来迁移起来比较麻烦，所以一般我们都是将图片上传到图床上，然后外链到博客中
这里我们使用七牛云存储
注册用户通过实名认证后有10GB 的免费空间
并且 七牛云在加载图片的时候能够通过拼接url参数来对图片做处理，比如缩略图，水印，剪裁等等

所以我们写博客时，如果用到图片的话就必须经过如下步骤

  • 打开七牛面板，找到图片上传
  • 复制图片链接
  • 贴到博客

其中第一步是比较繁琐的，要打开文件选择器，然后找到图片，然后再上传，如果我们是用的截图（可能大部分情况是用的截图） 那就更麻烦，我们还要找到截图的位置，或者把截图先复制到某个常用文件夹里面然后再去后台上传

那么有没有更佳优雅的方式

答案是肯定的，这里推荐一个插件 qiniu4blog
能够检测某个文件夹，如果有新增图片，立即上传到我们配置的七牛平台，并且将链接保存到剪切板
使用这个插件之后我们的添加图片的流程就变成如下

  • 将图片复制到被检测的文件夹
  • 将链接粘贴到博客

接下来安装qiniu4blog

1
sudo pip install qiniu4blog

配置qiniu4blog 在home 目录下面新建配置文件qiniu.cfg 比如/Users/xxxx/qiniu.cfg

1
2
3
4
5
6
7
8
9
[config]
bucket = your-bucket-name
accessKey = qzA***********************sa
secretKey = P5G***********************wq
path_to_watch = /Users/xxx/Desktop/hexo/blog/images

[custom_url]
enable = true
addr = http://7qnct6.com1.z0.glb.clouddn.com/

这里 bucket是我们在七牛上面创建的资源对象的名字

path_to_watch 我们希望检测的自动上传的文件夹 我们在blog目录新建一个文件夹用来存放图片，并将目录指定到path_to_watch

custom_url 这里设置为true 因为我们并没有申请域名，所以使用的是七牛的测试域名

打开终端 运行qiniu4blog

1
$qiniu4blog

这里我在实际运行的时候 报错找不到ndg-httpsclient,pyasn1这两个库，通过

1
2
$pip install ndg-httpsclient
$pip install pyasn1

安装完毕之后 再次运行成功

此时比如我们需要截图贴到博客，我们可以用qq进行截图，然后对图片cmd+c,打开images 目录,cmd+v
图片会自动上传

此时图片地址也自动复制到剪切板上了,字节在博客中粘贴即可

添加About页面

打开主题的_config.yml配置文件 修改menu项目，去掉about的注释

1
2
3
4
5
6
7
menu:
  home: /
  #categories: /categories
  about: /about
  archives: /archives
  tags: /tags
  #commonweal: /404.html

此时重新运行 博客预览在博客的按钮导航区 出现了关于按钮

但是当我们点击关于的时候，却跳到了404页面 原因是找不到about 页面
查看浏览器指向的链接为http://bucengyongyou.github.io/about/

我们需要通过如下命令 添加一个页面

1
$hexo n page "about"

成功后在source/下面会创建一个abount文件夹 同时about里面会创建 index.md文件
这就是我们的about 要显示的页面，我们只需要按照博客的方式编辑即可

小结

致辞，我们已经搭建出了一个简单的博客，我们能够编辑博客，发布博客，并且能通过外网访问,下一篇将对博客进行进一步的优化，配置，包括

  • 对主题样式的修改
  • 添加评论
  • 首页文章，文章详情页，添加阅读数量统计