基于Hexo+Node.js+github+coding搭建个人博客——基础篇

2022-02-27 02:51:05

附上个人教程：http://www.ookamiantd.top/2017/build-blog-hexo-base/

搭建此博客的动机以及好处在此就不多谈了，之前已经表达过，详情请看Start My Blog Trip — Power By Hexo 
记录一下搭建的基本过程以及遇到的一些问题，仅供参考 
= =废话不多说，进入主题

  • Hexo博客搭建的基础大致流程为： 
    安装Node.js →安装Git → 安装Hexo → 安装主题 → 本地测试运行 → 注册给github与coding并创建pages仓库 → 部署

  • 这是博主的系统环境与版本: 
    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的童鞋，可参考文章末尾处的参考链接，步骤大同小异*

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

安装Node.js

Node.js的安装有很多种方式，Hexo的官方文档 建议是用nvm 安装，但好多人都说不行，所以找了另外两种方式安装 
windows的童鞋可参考安装Node.js

方法一：二进制包直接解压配置

在node.js的官网 下载二进制包来安装的，下载过后，解压，设置软链接，要不然每次都执行命令都要加上路径，好麻烦

ln -s /home/ybd/Data/soft/application/node-v6.2.0-linux-x64/bin/node /usr/local/bin/node

ln -s /home/ybd/Data/soft/application/node-v6.2.0-linux-x64/bin/npm /usr/local/bin/npm

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

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

node -version

npm -version

方法二：源文件编译安装

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

sudo apt-get install build-essential

去官网 下载源代码，选择最后一项，Source Code 
解压到某一目录，然后进入此目录,依次执行以下3条命令

./configure

make

sudo make install

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

node -v

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

curl http://npmjs.org/install.sh | sudo sh

基于Hexo+Node.js+github+coding搭建个人博客——基础篇

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

安装Git

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

sudo apt-get install git

windows下就直接到Git官网 下载安装即可

然后终端执行 git --version 查看是否安装成功 
基于Hexo+Node.js+github+coding搭建个人博客——基础篇

安装Hexo

什么是 Hexo？Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

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

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

npm install -g hexo-cli
  • 如果npm安装hexo失败，则很有可能是权限问题，或者npm与node的版本不兼容（很少出现）

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

sudo ln -s /home/ybd/data/application/node-v7.4.0-linux-x64/bin/hexo /usr/local/bin/hexo

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

本地启动Hello World与Hexo简单使用

初始化

随便建一个文件夹，名字随便取，博主取其名为blog，cd 到文件夹里，先安装必要的文件，执行以下命令：

hexo init  # hexo会在目标文件夹建立网站所需要的所有文件

npm install  # 安装依赖包

本地启动

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

hexo g # 等同于hexo generate，生成静态文件

hexo s # 等同于hexo server，在本地服务器运行

基于Hexo+Node.js+github+coding搭建个人博客——基础篇 
之后打开浏览器并输入IP地址 http://localhost:4000/ 查看，效果如下 
基于Hexo+Node.js+github+coding搭建个人博客——基础篇

新建文章与页面

hexo new "title"  # 生成新文章：\source\_posts\title.md

hexo new page "title"  # 生成新的页面，后面可在主题配置文件中配置页面
  • 生成文章或页面的模板放在博客文件夹根目录下的 scaffolds/ 文件夹里面，文章对应的是 post.md ，页面对应的是page.md，草稿的是draft.md

编辑文章

打开新建的文章\source\_posts\postName.md，其中postName是hexo new "title"中的title

title: Start My Blog Trip — Power By Hexo  # 文章页面上的显示名称，可以任意修改，不会出现在URL中

date: 2017-01-10 23:49:28  # 文章生成时间，一般不改

categories: diary  # 文章分类目录，多个分类使用[a,b,c]这种格式

tags: [Hexo,diary]  # 文章标签

---

#这里开始使用markdown格式输入你的正文。

<!--more-->

#more标签以下的内容要点击“阅读全文”才能看见

插入图片

插入图片有三种方式

方式一

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

![](图片路径)
  • 1
  • 1

方式二

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

post_asset_folder: true

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

{% asset_img 图片文件名 %}

方式三

使用七牛云储存，因为Github跟Coding项目容量有限，而且Github的主机在国外，访问速度较慢，把图片放在国内的图床上是个更好的选择，免费用户实名审核之后，新建空间，专门用来放置博客上引用的资源，进入空间后点击「内容管理」，再点击「上传」 
基于Hexo+Node.js+github+coding搭建个人博客——基础篇

上传完成之后点击关闭回到管理页面，选中刚上传的图片，最右边的操作点击复制链接即可 
基于Hexo+Node.js+github+coding搭建个人博客——基础篇 
然后在博文中通过地址引用

![](图片地址如：//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvb2pvYmExYzk4LmJrdC5jbG91ZGRuLmNvbS9pbWcvYnVpbGQtaGV4by9jb3B5VXJsLnBuZw==.jpg)

简单的命令

总结一下简单的使用命令

hexo init [folder] # 初始化一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站

hexo new [layout] <title> # 新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来

hexo version # 查看版本

hexo clean # 清除缓存文件 (db.json) 和已生成的静态文件 (public)

hexo g # 等于hexo generate # 生成静态文件

hexo s # 等于hexo server # 本地预览

hexo d # 等于hexo deploy # 部署，可与hexo g合并为 hexo d -g

安装主题（以NexT为例）

更多主题请看知乎专栏 
基于Hexo+Node.js+github+coding搭建个人博客——基础篇

复制主题

Hexo 安装主题的方式非常简单，只需要将主题文件拷贝至站点目录的 themes 目录下， 然后修改下配置文件即可 
在这我们使用git克隆最新版

cd your-hexo-site

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

启用主题

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

theme: next

然后 hexo s 即可预览主题效果

更换主题外观

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

scheme: Muse

#scheme: Mist

#scheme: Pisces

在次执行 hexo clean 和 heox s 可预览效果 
大部分的设定都能在NexT的官方文档 里面找到，如侧栏、头像、打赏、评论等等，在此就不多讲了，照着文档走就行了，接下只是个性定制的问题

注册Github和Coding并分别创建Pages

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

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

GitHub

注册Github帐号

进入Github 首页进行注册，用户名、邮箱和密码之后都需要用到，自己记好，不知道怎么注册的童鞋去问问度娘

创建Repository(Github Pages)

Repository相当于一个仓库，用来放置你的代码文件。首先，登陆进入Github，选择首页中的 New repository 按钮 
基于Hexo+Node.js+github+coding搭建个人博客——基础篇 
创建时，只需要填写Repository name即可，可以顺便创建README文件，就是红色那个钩，当然这个名字的格式必须为{user_name}.github.io，其中{user_name}必须与你的用户名一样，这是github pages的特殊命名规范，如下图请忽视红色警告，那是因为博主已经有了一个pages项目 
基于Hexo+Node.js+github+coding搭建个人博客——基础篇

Coding

注册Coding帐号

国内的网站，绝大部分都是中文的，注册什么的就不说了,进入Coding 滚键盘就是了= =

创建项目(Coding Pages)

Coding Pages请看 Coding Pages 
注册之后进入主页，点击项目，点击+，项目名为你的用户名 
基于Hexo+Node.js+github+coding搭建个人博客——基础篇 
查看Pages 服务是否开启：点击项目 -> 代码 -> Pages 服务，若没有开启则点开启 
基于Hexo+Node.js+github+coding搭建个人博客——基础篇

配置SSH与Git

那么我们有了两个免费的服务器之后，就要绑定个人电脑与它们联系，那就是SSH与Git 
绑定之后我们每次部署项目就不用输入帐号和密码

生成SSH Key

ssh-keygen -t rsa -C your_email@youremail.com

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

添加SSH Key

首先是Github，登录Github，右上角 头像 -> Settings —> SSH nd GPG keys —> New SSH key 。把公钥粘贴到key中，填好title并点击 Add SSH key 
基于Hexo+Node.js+github+coding搭建个人博客——基础篇

至于Coding，登录进入主页，点击 账户 —> SSH公钥 —> 输入key再点击 添加 
基于Hexo+Node.js+github+coding搭建个人博客——基础篇

验证成功与否

验证github

ssh -T git@github.com

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

ssh -T git@git.coding.net

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

git config --global user.name your name

git config --global user.email your_email@youremail.com

关于git可参考： 
史上最全github使用方法：github入门到精通 
廖雪峰老师的Git教程

部署到Github与Coding

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

npm install hexo-deployer-git --save

打开站点配置文件，拉到底部，修改部署配置：

# Deployment

## Docs: https://hexo.io/docs/deployment.html

deploy:

  type: git

  repo:

    github: git@github.com:masteranthoneyd/masteranthoneyd.github.io.git,master

    coding: git@git.coding.net:ookamiantd/ookamiantd.git,master

注意冒号后面是网站对应的用户名，接着就是/，然后再是你的项目名加上 .git,master 
保存后终端执行

hexo clean

hexo g

hexo d

稍等片刻，可能会由于环境、网络等原因，部署的时间会有偏差，有的人快有的慢 
基于Hexo+Node.js+github+coding搭建个人博客——基础篇 
部署完成后可在浏览器输入 yourName.github.io 或者 yourName.coding.me 都可以浏览到一个属于自己的博客了 ～

总结

最后用拙劣的语言总结一下博主搭建Hexo博客的体会，六个字：简洁但，不简单。 
再六个字，正如NexT官方说的：精于心，简于形 
= =貌似这个博客也不怎么简洁，有点花俏，装X嫌疑 
但无论怎样，折腾这个博客让我受益匪浅，正如之前听到的一句名言，忘了谁说的：不努力试一把，又怎么会知道绝望…好像很有道理，绝望中寻找光芒，绝处逢生，感觉挺不错的 
高级进阶篇:传送门

在次喂自己带盐！个人博客：http://www.ookamiantd.top

参考

使用Hexo搭建个人博客(基于hexo3.0)
Github Pages个人博客，从Octopress转向Hexo 
Hexo 3.1.1 静态博客搭建指南 
Hexo官方文档 
NexT官方文档

上一篇：Java 反射调用动态方法


下一篇：jquery获取显示器，屏幕的宽度，和高度