HEXO

HEXO搭建个人博客

HEXO搭建个人博客

Posted by cl9000 on February 10, 2017

最近在无意中在网上看见个很不错的网页博客，少见，在网上一查是GitHub Page + HEXO搭建的个人博客。作为一个攻城狮，见到如此，必须自己也搞出来试试。查找一些网上的资料和填坑，不就一个个人的技术博客必须诞生啦。大家或许搭建的时候仅花个几分钟，但在优化上可能就会占用你一天甚至两天的时间，优化好后就快了。只管写MD了.

Why do myself Blog？

  1. 写技术博对自己技术经验的总结。
  2. 可以提升自己的表述能力，光会做 ？不会说怎么可以，那你只有被别人利用的价值了。
  3. 对自己以后的升值夹心肯定的，例如面试的时候可以抛出来你的链接，瞅瞅这，哈哈。
  4. 。。。无量好处。。。

个人博客 - Mark - 搭建开始

wo选择的是GitHubPage + Hexo，一种简单高效的构建方式。
当然还有其他的实现方式，如：WorkPress、GitHubPage + Jekell等等。

配置必要环境

  1. 安装Node.js
    用到nodejs的包管理器npm
  2. git（Xcode自带）
    或借助三方软件，如SourceTree，SVN
  3. GitHub
    用来做博客的远程仓库、调整域名、源码的服务器的，怎么与本地hexo建立连接下面讲。SSH Keys，可以不配，不配的话以后每次对自己的博客有改动部署的时候就要手动输入账号密码，配置了就不需要了，怎么配置网上有很多教程

安装HEXO

  1. 打开终端中输入：
    $ sudo npm install -g hexo

  2. 安装完成, 执行Hexo 命令，** 初始化本地博客仓库** 两种创建方式。如下

    • 创建一个文件夹，如：myblog，cd到myblog里执行命令：
      $ hexo init
    • cd 到 desktop（or 你想去的地方~） 也可以直接
      $ hexo init mybolg

  3. 生成静态网页
    $ hexo genrate 或 hexo g

  4. 本地预览 - 在终端中 cd 到你的本地博客仓库（就是myblog文件夹，我怕我看不懂，hahaha~）执行：
    $ hexo s

上述步骤完成。 博客的基本框架就基本构建完成，简单吧! hahaha~, 坑不在这。。。
Hexo 默认的博客主题是landscape主题，后面介绍怎么更换主题及链接Github。下面来试下本地的博客预览效果

终端命令图

执行完 hexo server ,在浏览器上输入网址：http://localhost:4000/ 或 http://0.0.0.0:4000/ ，就能预览到landscape主题下的博客效果，具体如图：

在这简单描述下初始化后的目录结构:

  • _config.yml ——是博客主要配置文件
  • db.json——是博客数据库
  • node_modules——是NodeJS依赖模块
  • public ——静态网页存放的地方,执行一次hexo clean，此文件夹会被清除， hexo g 会再次生成
  • source——是博客内容以及其他页面（page）存在的目录，这个目录里面有个_post目录就是我们存放博客内容的地方，也就是存放博客内容markdown文档地方，输入hexo new “newPage”就会在这个目录建立一个名为newPage的子目录，然后在里面放入md文档，并在主题的配置文件里面添加相应栏目* newPage，这样就会显示在主页面的目录上。（将在后续有所mark）
  • themes——是主题存放文件
常见的HEXO配置错误:
1
2
3
4
5
6
ERROR Plugin load failed: hexo-server

原因： Besides, utilities are separated into a standalone module.
 hexo.util is not reachable anymore.

解决方法，执行命令：$ sudo npm install hexo-server
1
2
3
4
5
6
7
8
9
10
执行命令hexo server，提示：Usage: hexo<Command> ....

原因：我认为是没有生成本地服务

解决方法，执行命令：$ npm install hexo-server --save

提示：hexo-server@0.1.2 node_modules/hexo-server
.... 

表示成功了[参考](https://hexo.io/zh-cn/docs/server.html)

这个时候再执行：$ hexo-server

得到: INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
这个时候再点击http://0.0.0.0:4000/， 正常情况下应该是最原始的画面，如果出现是： 白板和Cannot GET /
原因： 由于2.6以后就更新了，我们需要手动配置些东西，我们需要依次下面三行命令：

1
2
3
$ npm install hexo-renderer-ejs --save
$ npm install hexo-renderer-stylus --save
$ npm install hexo-renderer-marked --save

这个时候再重新生成静态文件，命令：
$ hexo generate （或hexo g）

启动本地服务器：
$ hexo server （或hexo s）

再点击网址http://0.0.0.0:4000 OK终于可以看到属于你自己的blog啦！！！参考链接，至此，本地的blog设置已经完成，但是现在域名和服务器都是基于自己本地的电脑，接下来需要跟Github page进行关联，

配置Github page

登录或者注册
有Github账号的直接 + 库，没有的注册个再 + 呗

填写仓库名称：注意 Respository name 中一定要输入：你的用户名.github.io,然后点击”Create repository“ 按钮完成创建即可。
不是用户名.github.io,最终的后果是显示404页面。故，在这略微留意一下。具体如下图所示：

以上要注意

创建好库，下面打开本地建好的本地博客仓库myBlog，目录如下：

myBlog
　｜
　｜－－ _config.yml
　｜－－ node_modules
　｜－－ public
　｜－－ source
　｜－－ db.json
　｜－－ package.json
　｜－－ scaffolds
　｜－－ themes

现在我们需要_config.yml文件，来建立与GitHub关联，命令：
$ vim _config.yml
翻到最下面，改成我这样子的，注意：** : 后面要有空格**

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

改完后 esc + :wq 保存退出或者用文本编辑器更改

执行如下命令才能使用git部署：

1
npm install hexo-deployer-git --save

网上会有很多说法，有的type是github, 还有repository 最后面的后缀也不一样，是github.com.git，我也踩了很多坑，我现在的版本是hexo: 3.2.2，执行命令hexo -vsersion就出来了,貌似3.0后全部改成我上面这种格式了。 忘了说了，我没用SSH Keys如果你用了SSH Keys的话直接在github里复制SSH的就行了，总共就两种协议，相信你懂的。
然后，执行部署命令：
$ hexo deploy
　然后再浏览器中输入http://cl9000.github.io/ 就行了，我的 github 的账户叫 cl9000 ,把这个改成你 github 的账户名就行了，就可以访问了

部署步骤：

每次部署的步骤，可按以下三步来进行。

1
2
3
$ hexo clean        清理缓存干掉public
$ hexo generate     重新生成静态文件
$ hexo deploy       部署到Github
一些常用 hexo 命令：
1
2
3
4
5
6
7
$ hexo new "postName" #新建文章
$ hexo new page "pageName" #新建页面
$ hexo generate #生成静态页面至public目录
$ hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
$ hexo deploy #将.deploy目录部署到GitHub
$ hexo help  #查看帮助
$ hexo version  #查看Hexo的版本

这是Github上的，主题列表github上都有详细介绍，自己研究吧

一些基本修改路径
  • 文章在 source/_posts，编辑器可以用 Sublime、Mweb，支持 markdown 语法。
  • 如果想修改头像可以直接在主题的 _config.yml 文件里面修改，友情链接、分享、评论等的都在这。
  • 修改站名在 public/index.html 里修改。

CNAME每次clean消失问题：
解决：将需要上传至github的内容放在source文件夹，例如CNAME、README、favicon.ico、images等，再次hexo clean、hexo g、public文件中就会有啦。。

关于NEXT主题的设置

参考官网–>文档很详细的

好了，开始打理你的博客吧，有什么问题或者建议，都可以提出来，我会继续更新的。


赏 支付宝打赏 微信打赏

赞赏一下 坚持原创技术分享，您的支持将鼓励我继续创作！



FEATURED TAGS
HEXO
FRIENDS