Skytoby
Skytoby

hexo+github搭建个人博客

Posted on

hexo+github搭建个人博客

Posted on

本来想用hugo建立个人博客，但是那个主题的文章目录太不友好了，找了很久没办法，只能用hexo了，在hexo中找到了比较合适的模块就用hexo建立个人博客了，以后基本上就用这个模板了，也记录下建立的方式吧！

一、搭建本地环境

1、安装Git，下载地址：点击

下载后，按提示进行安装即可，作用是：把本地的内容提交到github上去

注意：官网下载速度不是很快，可以去其他地方搜索相关资源。

2、安装Node，下载地址：点击

按顺序安装即可

3、安装Hexo

Node和Git都安装好后,创建一个文件夹,如blog,用于存放后期用到的所有的hexo文件。

在blog文件夹中右键，选择git bash here，打开窗口，输入：

1
npm install hexo-cli -g

然后输入

1
npm install hexo --save

待安装完成后，输入一下代码，用来查看版本

1
hexo -v

然后执行init命令初始化hexo,命令：

1
hexo init

至此，全部安装工作已经完成！

接下来，执行以下代码，用来生成服务，然后在本地访问。

1
2
hexo g
hexo s

执行后，会出现代码：

1
2
3
4
$ hexo s
(node:58928) [DEP0061] DeprecationWarning: fs.SyncWriteStream is deprecated.
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

在浏览器中输入http://localhost:4000/ ，可以访问即表示本地hexo发布成功。

二、搭建GitHub环境

1、在GitHub官方注册账号

2、New repository

此处，注意Owner的名称与repository的前半部分必须一致，例如：

最后仓库的地址如下：https://github.com/用户名/用户名.github.io.git

3、开启GitHub pages

打开这个库的setting页面，找到GitHub Pages，创建即可，创建成功后，便可以通过浏览器访问owner.github.io

三、将本地Hexo与github page 联系起来

1、配置Git个人信息

1
2
1 git config --system user.name "yourusername"
2 git config --system user.email "youremail@163.com"

2、配置Deployment

在_config.yml文件中找到deployment，然后配置如下：

1
2
3
4
1 deploy:
2   type: git
3   repo: git@github.com:githubname/githubname.github.io.git
4   branch: master

3、发布到Github

输入如下命令：hexo clean && hexo g && hexo d；

也可以分三步：

1
2
3
1 hexo clean
2 hexo generate
3 hexo deploy

在执行deploy中，会弹出输入框如下，分别输入在GitHub上的账号密码即可；

这样就实现了本地与GitHub的连接，当然也可以通过SSH Keys方式。两种方式都可以~

备注：也可以直接进入public目录，git操作到github

三、更换主题

更换主题主要是两步，先下载主题然后放到博客中的themes文件夹（专门用来存放主题）下，再修改主题的配置文件_config.yml中相关参数，启用themes文件夹下新增的主题。这里用Next主题做示例。

下载Next主题。
进入 hexoBlog/themes 文件夹中，打开Git Bash面板，输入：
git clone https://github.com/iissnan/hexo-theme-next themes/next

1.把主题包克隆到themes文件夹中即可。

  1. 启用主题
    与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后，打开themes下的主题配置文件_config.yml， 找到 theme 字段，并将其值更改为 next（注意冒号后面要留一个 空格）。
  2. 验证主题
    清除并重新生成hexo静态文件，启动本地服务器，然后通过 http://localhost:4000/ 预览博客：
1
2
3
hexo clean      #清除静态文件
hexo g          #重新生成静态文件
hexo s      #启动服务器

如果网络没问题，通过域名访问你的博客也可以看到刚换的新主题了。

四、博客操作

新建文章

1
hexo new post test

执行上面命令会新建一篇名为‘test’的文章，源文件会自动生成到hexoBlog/source/_post 路径下，后缀为点md ，直接打开编辑就可以了。编辑完保存，然后再依次执行

1
2
3
hexo clean 
hexo g 
hexo d

在博客就可以看到你的文章了（有时候网络问题生成会比较慢，需要等几分钟才可以看到）。

新建页面
新建标签、分类、关于我等各种页面，并在博客的菜单栏中显示。这里以新建‘标签’页面来做示范。
创建页面

1
hexo new page 'tags'

会在hexoBlog/source路径下自动生成一个名为tags的文件夹，里面包含一个index.md的文件，在这个文件中添加对应的页面类型type: tags：

1
2
3
4
5
---
title: tags
date: 2018-09-16 16:20:05
type: "tags"
---

把页面路径添加到菜单中。
编辑主题配置文件（themes/_config.yml）,找到munu字段，添加tag: /tags（格式为item_name: link），如下：

1
2
3
menu:
    home: /
    tag: /tags    #‘标签’’页面的路径

参考资料

https://blog.csdn.net/qijian2003122/article/details/82805732

https://www.cnblogs.com/Dreamice/p/7205231.html