天天看点

基于Hexo+Node.js+github+coding搭建个人博客——基础篇 安装Node.js 安装Git 安装Hexo 本地启动Hello World与Hexo简单使用 安装主题(以NexT为例) 注册Github和Coding并分别创建Pages 配置SSH与Git 部署到Github与Coding 总结 参考

记录一下搭建的基本过程以及遇到的一些问题,仅供参考 

= =废话不多说,进入主题

Hexo博客搭建的基础大致流程为: 

这是博主的系统环境与版本: 

OS: Ubuntu16.04 

Node.js: 6.2.0 

Npm: 3.8.9 

Hexo: 3.2.2 

主题NexT: 5.1.0 

Git: 2.7.4

对于使用windows的童鞋,可参考文章末尾处的参考链接,步骤大同小异*

以下提到的站点配置文件指的是博客文件根目录下的 <code>_config.yml</code>,主题配置文件是主题文件夹下的 <code>_config.yml</code>,童鞋们不要混淆了

注意!源文件要写绝对路径,否则会报错:链接层数过多。也可以直接将node可执行文件拷贝到 <code>/usr/local/bin</code> 目录下。

接下来就可以查看是否成功配置了

在安装前,首先需要配置安g++编译器

解压到某一目录,然后进入此目录,依次执行以下3条命令

执行以下命令,检测是否已经装好node.js

npm安装,一条命令即可解决

基于Hexo+Node.js+github+coding搭建个人博客——基础篇 安装Node.js 安装Git 安装Hexo 本地启动Hello World与Hexo简单使用 安装主题(以NexT为例) 注册Github和Coding并分别创建Pages 配置SSH与Git 部署到Github与Coding 总结 参考

博主安装Node.js遇到的问题就是多次安装了不同版本的Node.js,有的是安装在用户变量上,有的是系统变量,所以每次用的时候都要切换到root用户,就算赋权 <code>sudo chmod 777 file</code> 都没有用,所以折腾了很久才把Node.js完全卸载,再重新安装

Ubuntu系统下安装Git非常简单,只需一条命令:

然后终端执行 <code>git --version</code> 查看是否安装成功 

基于Hexo+Node.js+github+coding搭建个人博客——基础篇 安装Node.js 安装Git 安装Hexo 本地启动Hello World与Hexo简单使用 安装主题(以NexT为例) 注册Github和Coding并分别创建Pages 配置SSH与Git 部署到Github与Coding 总结 参考
什么是 Hexo?Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

所有以上必备的应用程序安装完成后,无论是在哪个操作系统,之后的操作都一样

安装Hexo的非常简单,只要一条命令,前提是安装好Node.js与Git

如果npm安装hexo失败,则很有可能是权限问题,或者npm与node的版本不兼容(很少出现)

如果顺利安装完成,理论上Hexo已经安装完成,但在Ubuntu系统中,比较坑的地方就是 <code>hexo</code> 命令居然放在了Node.js安装目录的 <code>bin</code> 文件夹下,不能快捷地在终端把命令敲出来,所以还是老规矩,软链接走起

到此,Hexo的安装已基本完成,可以先试一下Hello World。

随便建一个文件夹,名字随便取,博主取其名为blog,<code>cd</code> 到文件夹里,先安装必要的文件,执行以下命令:

有了必要的各种配置文件之后就可以在本地预览效果了

基于Hexo+Node.js+github+coding搭建个人博客——基础篇 安装Node.js 安装Git 安装Hexo 本地启动Hello World与Hexo简单使用 安装主题(以NexT为例) 注册Github和Coding并分别创建Pages 配置SSH与Git 部署到Github与Coding 总结 参考

之后打开浏览器并输入IP地址 <code>http://localhost:4000/</code> 查看,效果如下 

基于Hexo+Node.js+github+coding搭建个人博客——基础篇 安装Node.js 安装Git 安装Hexo 本地启动Hello World与Hexo简单使用 安装主题(以NexT为例) 注册Github和Coding并分别创建Pages 配置SSH与Git 部署到Github与Coding 总结 参考

生成文章或页面的模板放在博客文件夹根目录下的 <code>scaffolds/</code> 文件夹里面,文章对应的是 <code>post.md</code> ,页面对应的是<code>page.md</code>,草稿的是<code>draft.md</code>

打开新建的文章<code>\source\_posts\postName.md</code>,其中<code>postName</code>是<code>hexo new "title"</code>中的<code>title</code>

插入图片有三种方式

在博客根目录的 <code>source</code> 文件夹下新建一个 <code>img</code> 文件夹专门存放图片,在博文中引用的图片路径为 <code>/img/图片名.后缀</code>

1

对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说,Hexo也提供了更组织化的方式来管理资源,将站点配置文件中的 <code>post_asset_folder</code> 选项设为 <code>true</code> 来打开文章资源文件夹

然后再博文中通过相对路径引用

基于Hexo+Node.js+github+coding搭建个人博客——基础篇 安装Node.js 安装Git 安装Hexo 本地启动Hello World与Hexo简单使用 安装主题(以NexT为例) 注册Github和Coding并分别创建Pages 配置SSH与Git 部署到Github与Coding 总结 参考

上传完成之后点击关闭回到管理页面,选中刚上传的图片,最右边的操作点击复制链接即可 

基于Hexo+Node.js+github+coding搭建个人博客——基础篇 安装Node.js 安装Git 安装Hexo 本地启动Hello World与Hexo简单使用 安装主题(以NexT为例) 注册Github和Coding并分别创建Pages 配置SSH与Git 部署到Github与Coding 总结 参考

然后在博文中通过地址引用

总结一下简单的使用命令

基于Hexo+Node.js+github+coding搭建个人博客——基础篇 安装Node.js 安装Git 安装Hexo 本地启动Hello World与Hexo简单使用 安装主题(以NexT为例) 注册Github和Coding并分别创建Pages 配置SSH与Git 部署到Github与Coding 总结 参考

Hexo 安装主题的方式非常简单,只需要将主题文件拷贝至站点目录的 <code>themes</code> 目录下, 然后修改下配置文件即可 

在这我们使用git克隆最新版

2

打开站点配置文件, 找到 theme 字段,并将其值更改为 next

然后 <code>hexo s</code> 即可预览主题效果

NexT有三个外观,博主用的是 <code>Muse</code>,直接更改主题配置文件的 <code>scheme</code> 参数即可,如果显示的是繁体中文,那么站点配置文件中的 <code>language: zh-CN</code>

在次执行 <code>hexo clean</code> 和 <code>heox s</code> 可预览效果 

在本地运行没有问题的话,那么可以部署到外网去,在此之前,先得有服务器让你的项目可以托管,那么Github Page与Coding Page就是个很好的东西,它们可以让我们访问静态文件,而Hexo生成的恰恰是静态文件 

那为什么要注册两个网站呢?因为Github是国外的服务器,访问速度比较慢,而Coding是国内的,速度相对来说比较快,在后面DNS解析的时候可以把国内的解析到Coding,国外的解析到Github,完美

基于Hexo+Node.js+github+coding搭建个人博客——基础篇 安装Node.js 安装Git 安装Hexo 本地启动Hello World与Hexo简单使用 安装主题(以NexT为例) 注册Github和Coding并分别创建Pages 配置SSH与Git 部署到Github与Coding 总结 参考

创建时,只需要填写Repository name即可,可以顺便创建README文件,就是红色那个钩,当然这个名字的格式必须为{user_name}.github.io,其中{user_name}必须与你的用户名一样,这是github pages的特殊命名规范,如下图请忽视红色警告,那是因为博主已经有了一个pages项目 

基于Hexo+Node.js+github+coding搭建个人博客——基础篇 安装Node.js 安装Git 安装Hexo 本地启动Hello World与Hexo简单使用 安装主题(以NexT为例) 注册Github和Coding并分别创建Pages 配置SSH与Git 部署到Github与Coding 总结 参考

注册之后进入主页,点击项目,点击+,项目名为你的用户名 

基于Hexo+Node.js+github+coding搭建个人博客——基础篇 安装Node.js 安装Git 安装Hexo 本地启动Hello World与Hexo简单使用 安装主题(以NexT为例) 注册Github和Coding并分别创建Pages 配置SSH与Git 部署到Github与Coding 总结 参考

查看Pages 服务是否开启:点击项目 -&gt; 代码 -&gt; Pages 服务,若没有开启则点开启 

基于Hexo+Node.js+github+coding搭建个人博客——基础篇 安装Node.js 安装Git 安装Hexo 本地启动Hello World与Hexo简单使用 安装主题(以NexT为例) 注册Github和Coding并分别创建Pages 配置SSH与Git 部署到Github与Coding 总结 参考

那么我们有了两个免费的服务器之后,就要绑定个人电脑与它们联系,那就是SSH与Git 

绑定之后我们每次部署项目就不用输入帐号和密码

后面的 <code>[email protected]</code> 改为你的邮箱,之后会要求确认路径和输入密码,我们这使用默认的一路回车就行。成功的话会在~/下生成 <code>.ssh</code> 文件夹,进去,打开 <code>id_rsa.pub</code>,复制里面的key,粗暴点就是 Ctrl+a 然后 Ctrl+c

首先是Github,登录Github,右上角 头像 -&gt; <code>Settings</code> —&gt; <code>SSH nd GPG keys</code> —&gt; <code>New SSH key</code> 。把公钥粘贴到key中,填好title并点击 <code>Add SSH key</code> 

基于Hexo+Node.js+github+coding搭建个人博客——基础篇 安装Node.js 安装Git 安装Hexo 本地启动Hello World与Hexo简单使用 安装主题(以NexT为例) 注册Github和Coding并分别创建Pages 配置SSH与Git 部署到Github与Coding 总结 参考

至于Coding,登录进入主页,点击 <code>账户</code> —&gt; <code>SSH公钥</code> —&gt; 输入key再点击 <code>添加</code> 

基于Hexo+Node.js+github+coding搭建个人博客——基础篇 安装Node.js 安装Git 安装Hexo 本地启动Hello World与Hexo简单使用 安装主题(以NexT为例) 注册Github和Coding并分别创建Pages 配置SSH与Git 部署到Github与Coding 总结 参考

验证github

如果是第一次的会提示是否continue,输入yes就会看到:You’ve successfully authenticated, but GitHub does not provide shell access 。这就表示已成功连上github!之前博主就是因为没有输入yes,导致几次失败,粗心地一路回车= = 

验证coding

同上,按yes 

接下来我们要做的就是把本地仓库传到github上去,在此之前还需要设置username和email,因为github每次commit都会记录他们

关于git可参考: 

<a href="http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000">廖雪峰老师的Git教程</a>

在此之前,先安装Git部署插件

打开站点配置文件,拉到底部,修改部署配置:

注意冒号后面是网站对应的用户名,接着就是/,然后再是你的项目名加上 <code>.git,master</code> 

保存后终端执行

稍等片刻,可能会由于环境、网络等原因,部署的时间会有偏差,有的人快有的慢 

基于Hexo+Node.js+github+coding搭建个人博客——基础篇 安装Node.js 安装Git 安装Hexo 本地启动Hello World与Hexo简单使用 安装主题(以NexT为例) 注册Github和Coding并分别创建Pages 配置SSH与Git 部署到Github与Coding 总结 参考

部署完成后可在浏览器输入 <code>yourName.github.io</code> 或者 <code>yourName.coding.me</code> 都可以浏览到一个属于自己的博客了 ~

最后用拙劣的语言总结一下博主搭建Hexo博客的体会,六个字:简洁但,不简单。 

再六个字,正如NexT官方说的:精于心,简于形 

= =貌似这个博客也不怎么简洁,有点花俏,装X嫌疑 

但无论怎样,折腾这个博客让我受益匪浅,正如之前听到的一句名言,忘了谁说的:不努力试一把,又怎么会知道绝望…好像很有道理,绝望中寻找光芒,绝处逢生,感觉挺不错的 

<a href="http://opiece.me/2015/04/09/hexo-guide/">使用Hexo搭建个人博客(基于hexo3.0) </a> <a href="http://theme-next.iissnan.com/getting-started.html">NexT官方文档</a>