hexo+gitlab/coding 搭建个人blog

基于hexo搭建私人的blog

最近在项目组内使用hexo和gitlab/coding帮助小组内部搭建了一个“组内学习blog”，一方面帮助大家把每周分享的技术资料管理起来，一方面通过hexo搭建的静态网站也方便查看和回顾，下面准备将整个搭建过程记录下来.

步骤1:全局安装hexo

hexo是一个轻量级的博客框架，它是给予markdown的，可以快速搭建一个静态网站

1 2	npm install hexo -g // 国内推荐使用taobao的镜像仓库，cnpm install hexo -g hexo -v // 查看hexo是否安装成功

hexo是否安装成功

步骤2:建立blog文件夹，快速初始化项目

1
2
3

mkdir blogName // 在准备创建项目的目录下通过命令行创建一个文件夹blogName
cd blogName // 进入blogName
hexo init // 使用hexo快速初始化一个基本的blog系统

步骤3:本地运行blog

1	hexo server // hexo s 也可以在本地http://localhost:4000拉起整个blog

本地调试

步骤4:blog的基本配置

主题风格

hexo默认是使用landscape主题，如果需要其他主题，例如Next,yilia都是比较常用的主题,在hexo项目的根路径下执行下面的命令从github下载相应的主题包

1
2
3

git clone https://github.com/iissnan/hexo-theme-next themes/next // 从github下载Next主题

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia // 从github上下载yilia主题

如果是多人合作的blog项目推荐使用git submodule add xxx.git 的方式将主体包当作子模块引入，而不是直接clone

在hexo的工程中，有一个全局配置的_config.yml文件和主题的配置的_config.yml文件

在主题配置中找到theme，可以选择主题风格,

# theme: landscape
theme: next #主题拓展，可以在主题商店选择其他主题，这里使用next 
# theme: yilia

# Schemes  # NexT 主题提供三种布局
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

添加blog的菜单栏

在主题配置中找到menu

menu:
    home: / || home
    about: /about/ || user
    tags: /tags/ || tags
    categories: /categories/ || th
    archives: /archives/ || archive

注意每个主题风格下的menu写法略有不同，在Next主题下上，menu下面的菜单栏分别表示菜单文件的路径(例如/tags))和图标(tags)
配置好menu的配置后需要创建相关的文件

1	hexo new page xxx // 例如创建tags的menu，则是hexo new page tags,则会在source路径下创建tags文件夹

给md文件引入image图片

在全局配置_config.yml文件中修改如下属性

1	post_asset_folder: true #创建同名的folder引入图片到md文件

安装hexo-asset-image插件在md文件中引入图片

1	npm install hexo-asset-image --save

当执行 hexo new xxx 命令的时候，会在source路径下创建xxx.md文件和同名的xxx文件夹，用来存放image等附件

创建md

对blog进行分类管理

一般一个md文件的文章只能有一个categories

使用： hexo new page categories 新建一个标签页面。

对source／tags/index.md增加type:”tags”

---
title: tags
date: 2018-10-14 17:27:15
type: "tags"
---

在source的xxx.md文件中

---
title: 标签测试
categories:
- Testing                   （这个就是文章的分类了）
---

对blog进行标签管理

一般一个md文件的文章可以you多个tags

使用： hexo new page tags 新建一个标签页面。
对source／categories/index.md增加type:”categories”

---
title: tags
date: 2018-10-14 17:27:15
type: "tags"
---

在source的xxx.md文件中

---
title: 标签测试
tags:
- Testing                   （这个就是文章的标签了）
- Another Tag               （这个就是文章的标签了）
---

对blog进行全局搜索

step1 :安装插件
直接在博客文件夹下运行命令

1	npm install hexo-generator-searchdb --save

step2:修改站点全局配置文件_config.yml

search：
path: search.xml
field: post
format: html
limit: 10000

step3:修改主题配置文件_config.yml

1 2	local_search: enable: true

注册gitlab仓库和coding仓库地址

为了让国内和国外的用户都可以访问你的blog，所以最好同步发布到gitlab和coding，提高用户的访问速度
创建一个远程仓库的地址 xxx.git
配置git

1
2
3

git config --global user.name "Pis" 
git config --global user.email "email@xxx.com"
git config --list //查看git配置

ssh私钥

本地Git仓库和代码托管远程仓库之间的传输是通过SSH加密的

   ssh-keygen -t rsa -C "email@xxx.com" ＃创建SSH Key

   1>如果在用户主目录下有.ssh目录，查看有没有id_rsa和id_rsa.pub这两个文件
2>没有的话，执行ssh-keygen -t rsa -C "email@example.com"，按照向导填写信息。
3>id_rsa是私钥，不能泄漏出去；id_rsa.pub是公钥，可以放心的告诉别人。
4>登陆远程托管仓库，在settings中SSH_Keys页面点击Add SSH Key，填上title在key文本里面粘贴id_rsa.pub文件的内容。

远程仓库和本地blog项目建立关系

1 2	git remote add origin xxx.git //将本地的blog项目和远程的xxx.git仓库的master分支建立关系 git remote -v // 可以查看是否建立了关系

在全局配置中找到URL配置项，配置hexo最终部署的地址

如果本地样式显示正常，deploy部署到远程环境样式异常，一般都是url配置的不对

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
# 一般填写自己的站点链接
url: http://unclepis.coding.me
root: /

deploy:
  type: git
  repo:
      coding: coding远程仓库地址,coding远程仓库分支
      gitlab: gitlab远程仓库地址,gitlab远程仓库分支

配置好这个后执行

1	hexo d -g //就会发布blog项目到远程的代码仓库

部署blog到远程代码仓库

部署完成以后就可以通过coding或者gitlab的pages服务，通过url访问blog了

其他配置

hexo的next主题个性化教程:打造炫酷网站
 Hexo个人博客SEO优化——如何被百度谷歌收录
 怎么进行百度验证（html标签验证&文件验证）
hexo插件）
hexo加密文章配置
 hexo新建文章置顶