了解如何搭建自己的hexo博客

Posted on | In | Visitors:

前段时间在朋友的帮助下，也找过很多资料来搭建自己的hexo博客，之前也就是在简述上写自己的博客文章，说真的，自己如果懂得如何搭建博客来写，更有些自豪感。废话就不多说了，下面就来了解一下hexo以及如何搭建一个属于自己的hexo博客。

了解hexo

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

hexo出自台湾的tommy351之手，一个基于Node.js的静态博客程序，可以很方便的生成静态网页托管于github、gitcafe和Heroku，类似于jekyll，但Jekyll需要的git命令稍有点繁琐。

重要的是hexo是免费的，可以在各个平台上搭建，如GitHub、GitCafe、coding、七牛。可以快速渲染自己编写的markdown文件。

hexo的依赖

  • 搭建nodejs环境 （必须）
    node官网

  • git （必须）

    • windows 下载：git
    • linux 下载：
      1
      2
      $ sudo apt-get update
      $ sudo apt-get install git

  • coding（ 必须 ，可以用github来搭建）

  • 域名（个性化）
    域名只是让你的博客访问更有个性化，coding默认的访问博客的地址是 http://your-coding-name.coding.me/your-repo-name ，在github中的访问地址是：https://your-github-name.github.io/your-repo-name/

编写hexo可以使用Atom，我挺喜欢这款编辑器的markdown预览功能

安装hexo

安装hexo，打开git bash操作界面（cmd界面也可以）

1
npm install -g hexo

初始化blog项目，并安装依赖

1
2
3
4
mkdir blog
cd blog
hexo init
npm install

运行hexo，在本地中预览 - 全称（hexo server）

1
hexo s

直接输入http://localhost:4000/就可以看到本地部署的hexo

紧接着就创建自己的coding项目，把本地的hexo放到远程的coding上运行。

本人是把hexo放在master分支，博文放到coding-pages分支中。

在coding中创建博客项目

创建博客项目

创建博客项目

这时写上项目名以及项目的描述。

绑定ssh

检查本地是否存在ssh key：
1
$ cd ~/.ssh
生成ssh

如果本地没有，那么就在本地中生成ssh证书，生成的证书中有两个文件，一个是私钥，一个是公钥。

1
ssh-keygen -t rsa -C "邮箱地址"

执行以上代码，会弹出是否需要输入密码，输不输入密码关系不大，这里选择不输入密码。

把公钥(id_rsa.pub)的内容拷贝到coding账户 -> SSH公钥 -> 新增公钥的内容中去，写上公钥名字，以及将公钥的有效期的永久有效勾上

测试

对于coding，git@git.coding.net
（在windows中是没有ssh指令，可以使用git bash命令窗口就能找到）

1
$ ssh -T git@git.coding.net

对于github，git@github.com不需要修改

1
$ ssh -T git@github.com

会出现类以下的反馈

1
2
3
The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

点击yes，就ok了。

在hexo中配置与coding相连

打开你在本地创建的项目blog，找到_config.yml,打开
配置如下，将内容推送到coding-pages分支中

1
2
3
4
deploy:
  type: git
  repo: git@git.coding.net:your-coding-name/your-repo-name.git
  branch: coding-pages

在你的博客项目blog，初始化为git仓库

安装完git，需要配置以下信息

1
2
$ git config --global user.name "username" //用户名
$ git config --global user.email  "youremail" //填写自己的邮箱

初始化项目

1
git init

选择要添加进仓库的文件：

1
git add .

如果你想分享这个文件夹里所有代码，就在add后面加“.”，如果指定某个文件，只需把“.”改为文件名即可。
添加进入仓库：

1
git commit -m "first commit"

-m后面的参数，表示说明，将代码提交到GitHub后，将会给出一个提交说明，表明这是我哪次提交的。
所有工作已准备充分，现在开始提交，还是几条命令：

1
2
3
4
5
6
// 添加coding源
git remote add origin git@git.coding.net:your-coding-name/your-repo-name.git
// 执行 git push 没有指定分支时，只有当前分支会被 push 到你使用 git pull 获取的代码。
git config --global push.default simple
// 上传本地项目代码到master分支
git push -u origin master

开启Pages服务及配置域名

域名的使用

购买域名后，可以配置子域名来绑定hexo博客

  • 将记录类型设置成CNAME
  • 主机记录，你喜欢
  • 记录值设置成，pages.coding.me
    设置成那样就可以了

Pages里添加域名访问呢

进入刚才创建的项目中，点击左侧的代码，再进入Pages服务页面中，点击立即开启，部署来源选择coding-pages分支。

好像是找不到coding-pages分支的，那么就要手动创建一个coding-pages分支，然后指定分支开启服务。

在自定义域名里，可以填写自己已经注册的域名，这样就可以通过自己的域名去访问你的博客

开始使用

以上配置好后，使用域名就可以访问了

新建文章

1
hexo n "postName" 相当于 hexo new "postName"

新建页面

1
hexo n page "pageName" 相当于hexo new page "pageName"

生成静态页面至public目录

1
hexo g 相当于hexo generate

开启预览本地博客服务，地址为http://localhost:4000/

1
hexo s 相当于hexo server

将.deploy目录部署到远程项目中

1
hexo d 相当于hexo deplog

安装hexo-deployer-git插件 - 第一次使用要安装这个插件

1
npm install hexo-deployer-git --save

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

1
hexo clean

查看帮助

1
hexo h 相当于hexo help

查看hexo的版本

1
hexo v 相当于hexo version

一般你写好自己的文章或配置好自己的设置，使用以下命令即可

1
2
3
hexo clean
hexo g
hexo d

主题 - 我这个主题为Next

下载Next主题

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

修改配置文件

找到根目录下的_config.yml文件，修改theme使支持

1
2
3
4
5
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
#theme: landscape
theme: next

选择Scheme为Mist，自己觉得这个样式会比较好看

找到主题配置文件，blog/themes/next目录下的_config.yml文件

1
2
3
4
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces

添加tags标签，与页面中的tag对应

1
hexo new page "tags"

修改/source/tags/index.md文件

1
2
3
4
title: tags
date: 2016-12-04 09:06:02
type: "tags"
---

其他配置

配置域名与hexo关联

前面配置的是，域名与coding之间的关联。

找到根目录的_config.yml文件

1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: 填写你的域名地址
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

配置头像

在根目录的_config.yml，me.jpg需要放到/blog/source/images目录下

1
2
# 头像
avatar: /images/me.jpg

配置多说评论

在根目录下的配置文件_config.yml添加字段

1
duoshuo_shortname: commit

commit为你注册多说域名的子域名，就如你多说的域名为：http://commit.duoshuo.com

使你的菜单栏显示中文

在根目录下的配置文件_config.yml找到language字段，修改为zh-Hans

1
2
# Site
language: zh-Hans

配置社交链接

1
2
3
4
5
6
7
8
# Social links
social:
  GitHub: git地址
# Social Icons
social_icons:
  enable: true
  # Icon Mappings
  GitHub: github

如果想添加其他社交链接，可以查看官方文档

配置hexo插件

添加网站地图
1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

在站点配置文件_config.yml中添加如下代码

1
2
3
4
5
# hexo sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

配置成功后，会生成在public目录下生成sitemap.xml 和 baidusitemap.xml，前者适合提交给谷歌搜素引擎，后者适合提交百度搜索引擎。

其次，在 robots.txt 中添加下面的一段代码：

1
2
Sitemap: http://blog.tangxiaozhu.com/sitemap.xml
Sitemap: http://blog.tangxiaozhu.com/baidusitemap.xml

将robots.txt 放置在\source 目录下。

参考

hexo官方文档
next主题文档
使用 Hexo 搭建博客的深度优化与定制
Hexo搭建GitHub博客（三）- NexT主题配置使用
HEXO+Github,搭建属于自己的博客

Adhere to the original technology to share, your support will encourage me to continue to create!