利用hexo和github建立个人技术博客站点

头图展示

毕业在互联网从事后台开发即将三年了，给自己搭建个窝总结下工作过程中遇到的一些问题以及自己相应的解决方案。基于hexo和github搭建自己的博客站点，是考虑到github提供了免费的服务，自己无需运维服务服务，再者这种方案自己更加可控，更加简洁，没有一些乱七八糟的广告干扰。

hexo介绍

Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub，且hexo对中文支持友好，更加详情内容可参考hexo官网介绍。

hexo服务搭建

1.注册github帐号并创建新的repository，用于存放hexo生成的博客文件

注意repository name得以 帐号名.github.io 格式

2.在自己的私人git服务或者在github新建立一个repository用于存放源文件

# pull源码文件管理库
git clone [email protected]:yongssu/blog.git

# 在自己的机器上安装node并安装hexo
npm install -g hexo-cli

# 在新的地方运行hexo初始命令
hexo init new_blog

# 将new_blog生成内容拷贝到blog文件内

# 运行以下命令就能在本地查看hexo服务,地址 localhost:4000
hexo new test_my_blog #创建新的blog文件
hexo g #生成
hexo s

# 然后就可以在blog对源文件进行管理

3.部署blog文章到github

在blog根目录下_config.yml配置站点信息以及上传github地址。

# Site
title: YONGSSU的技术站点
subtitle: 
description:
keywords:
author: yongssu
language:
timezone:

deploy:
  type: git
  repo: https://github.com/yongssu/yongssu.github.io
  branch: master

至此就可以通过 注册名.guthub.io 访问个人站点了。

4.配置域名

如果需要使用自己的域名，在域名网站注册域名并将域名cname定向到 yongssu.github.io,然后在yongssu.github.io repository下配置相应Custom domain为自己的域名。

至此，就可以通过自己的域名访问自己的个人网站了。

5.切换默认hexo主题

这里采用next主题，在blog文件下，下载相应的主题文件，并在blog跟目录下_config.yml配置文件中修改主题为next。主题相关的的配置在主题文件下的相应_config.yml文件进行配置。

6.next主题tags页面显示

# 建立tags页面，在source会建立tags文件夹
hexo new page tags
# 修改tags/index.md type为"tags"
---
title: tags
date: 2018-12-22 21:42:59
type: "tags"
---
# 在next的配置文件下_config.yml开启tags页面标签
menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags

7.提交git自定义域名被重置

使用 gitpage 功能将博客托管在了 github 上，并配置 CNAME 将自己的域名解析了过去，在 github 的仓库设置中开始 custom domain 的功能，这时候就可以直接使用自己的域名访问个人博客。但是发现一个问题是，每次配置 custom domain 之后，再次 hexo d 之后，custom domain 会被重置失效。

解决方案
在source下新建CNAME文件，然后将自己的域名写入文件中，再次deploy就能解决以上问题。

图片资源上传

当博文中有图片时，如果直接放在source文件中，会直接占用大量存储空间，因为图片会占据大量的存储的空间，加载的时候相对缓慢 ，这时考虑把博文里的图片上传到某一网站，然后获得外部链接，使用Markdown语法，完成图片的插入，这种网站就被成为图床。个人选择微博图床和对应chrome插件配合使用。使用如下：

微博图床使用截图

hexo常用命令介绍

npm install hexo -g #安装Hexo
npm update hexo -g #升级 
hexo init #初始化博客
#简写命令
hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署
# 常用命令
hexo server #Hexo会监视文件变动并自动更新，无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存，若是网页正常情况下可以忽略这条命令

本文参考配置链接

更多技术内容请访问个人博客