OS X 下使用 Hexo 和 Coding Pages 搭建静态博客

Hexo 是一款基于 Node.js 的静态博客框架, 目前在 GitHub 上已有 9133 star 和 1499 fork。Hexo 生成的静态页面能够部署在 Github 或 Coding 上,而且可以免费绑定本身的域名,能够用来很方便地搭建我的博客。html


1,Git 安装

搭建博客须要用到 git,下面这条命令可查看本机是否已安装 git,若未安装可参考这篇博文进行安装。node

git --version

2,安装 Node.js

Mac下最简单的作法即是直接下载pkg文件进行安装,最新版本的下载地址以下,选择后缀为pkg的文件下载安装便可:   nodejs.org/download/re…   完装完成后,要将如下路径计入你的系统环境变量 /usr/local/bin,步骤以下: 用vim 打开该文件:git

cd; vi .bash_profile 

在文件中加入该语句:github

export PATH=/usr/local/bin:$PATH 

并保存退出,从新加载shell让设置的环境变量生效:shell

source ~/.bash_profile 

3,将 npm 的源替换成淘宝的源

因为众所周知的缘由,国内访问官方默认 npmjs.org 源速度不是十分理想,因此建议切换成国内的,利用如下命令将其替换为淘宝的 npm 源:npm

npm config set registry http://registry.npm.taobao.org/ 

4,安装 Hexo

利用 npm 命令安装:ubuntu

sudo npm install -g hexo

由于可能有文件读写权限的问题,这里推荐用 sudo,输入密码后会开始安装,时间可能比较长,耐心等待,若是长时间卡在某一步 Ctrl + C 终止当前任务后重试便可。vim

5,本地创建博客

安装完成后,新建一个目录如 myblog 用于存放博客,切换到该目录下执行如下指令,Hexo 即会在目标文件夹初步生成博客所须要的全部文件:浏览器

hexo init

而后切换到该目录下执行以下命令,安装所须要的依赖:缓存

sudo npm install

网上有大量开发者们分享的模板可供选择使用,将它们的 Git 仓库 Clone 之后放到博客目录下的 themes 文件夹中便可:   Github Hexo Themes   有哪些好看的 Hexo 主题?   本博客的搭建我选择了使用该主题:   https://github.com/forsigner/fexo   在这里对原做者 forsigner 表示感谢,🙏

6,安装 Server 组件

保持在本地博客路径下,在终端中执行以下命令:

hexo

由于这并非一个完整的命令,因此这时咱们能够看到 hexo 输出的帮助信息,以下图所示:

Hexo-Coding-Pages-1.png

咱们能够在左边的 Commands 列表中查看咱们须要的命令是否已成功安装,由于某些版本的 Hexo 的 Server 模块须要独立安装因此这里咱们并无看到 server 命令,咱们能够执行下面这条命令来进行安装,若是有的话能够跳过这一步:

sudo npm install hexo-server --save

若是安装过程当中出现一些问题致使某些模块没有安装成功的也能够经过相似的方式单独安装某个模块进行修复。

7,安装 RSS 插件(可忽略)

到博客所在目录 myblog 下,利用该命令安装 RSS 插件,暂时不需添加 RSS 功能的同窗可忽略该步骤:

sudo npm install hexo-generator-feed --save

编辑 myblog 目录下的 _config.yml,添加以下代码开启 RSS 功能:

rss: /atom.xml

RSS 地址保持默认便可,不须要多作修改。

8,本地效果预览

在终端使用 cd 命令切换到博客所在目录 myblog,执行以下命令生成静态博客页面并启动本地服务器,若成功可在浏览器中访问 http://localhost:4000/ 进行预览。

hexo generate
hexo server

或者以下的缩写形式也能够:

hexo g
hexo s

9,部署到 Coding Pages

在 Coding 新建一个项目,假设为 myblog,而后修改本地博客目录下的 _config.yml 文件,根据官方文档的描述,修改如下几个参数,这些参数通常在文件底部:

deploy:
type: git               #部署方式,这里咱们用的是Coding的Git repo: <repository url>  #仓库地址,例如个人是git@git.coding.net:eyrefree/myblog.git    branch: [branch]        #分支名,可任意填写,我填写的是master message: [message]      #可不填,这是显示在提交记录里的描述信息,默认为日期 

参数修改完成后,咱们须要在终端中切换到博客所在目录安装 deploy 组建,执行如下命令将生成的博客静态页面 push 到咱们上面在 Coding 建立的 myblog 仓库中:

sudo npm install hexo-deployer-git --save

而后执行依次执行清理命令:

hexo clean

生成命令:

hexo g

部署命令:

hexo d

若是在 _config.yml 的 repo 处填写的仓库地址是 https 形式的,在部署时可能须要输入你的 Coding 帐号和密码。   而后切换到该项目的 Pages 标签,开启 pages 服务,分支名填写为咱们在_config.yml 文件中设定的分支,个人是 master。

10,服务器效果预览

pages 服务开启完成后,Coding 会提供一个相似 {user_name}.coding.me/{project_name} 的连接用于访问,例如用户名为 eyrefree 项目名为 myblog 的连接应该是:

http://eyrefree.coding.me/myblog

访问该连接便可进行预览,因为咱们引用的资源不少是和域名相关的,致使这里可能会有资源加载失败的状况,只能出现部分文字,接下来咱们将域名绑定后便可恢复正常。

11,绑定域名

默认提供的连接可能过长或者不便于平常使用,咱们也能够绑定本身的域名。   首先,须要提早准备一个域名,而后打开本身的域名控制面板,新建一个 CNAME 解析到 {user_name}.coding.me,例如个人是将 www.eyrefree.org 解析到 eyrefree.coding.me;   而后,打开 Coding 项目页面切换到 pages 项,填入刚才的设置解析的域名 www.eyrefree.org,点击“添加域名绑定”按钮便可,在浏览器中直接访问 www.eyrefree.org 就能成功打开。   有时可能因为缓存或者解析时间的问题,稍等片刻便可。

12,编写博文

接下来就是平常的博文编写啦,这里是使用 markdown 格式的,编写完成后添加到 source/_posts 目录下而后按照第 8 步的方法部署到 Coding 服务器便可,具体可参考这篇博文,Markdown 的一些语法能够参考:   wowubuntu.com/markdown/

13,常见问题

若执行 hexo 命令时出现以下警告信息:

{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' } { [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' } { [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' } 

能够尝试执行如下命令修复:

sudo npm install hexo --no-optional

14,备注

嘛,大概就是这些内容了,有遗漏的话会继续补充,😝。个人博客是用 Hexo 生成的使用了 Fexo 模版,开启了 Google 统计,Disqus 评论,RSS 订阅,站内搜索等,原文参见个人博客: www.eyrefree.org/2016/03/23/…


若有任何知识产权、版权问题或理论错误,还请指正。 https://juejin.im/post/5a3210a76fb9a0450f21f449 转载请注明原做者及以上信息。

做者:EyreFree 连接:https://juejin.im/post/5a3210a76fb9a0450f21f449 来源:掘金 著做权归做者全部。商业转载请联系做者得到受权,非商业转载请注明出处。
相关文章
相关标签/搜索