Hexo:搭建个人博客

发表于
字数统计: 1,446 字 | 阅读时长 ≈ 6 分钟

Create Hexo

需要环境

环境安装是只需一直点Next即可

安装Hexo

安装好Git和Node.js环境后，打开Git Bash，然后输入如下命令安装Hexo

1
npm install hexo-cli -g

输入如下命令查看是否安装成功

1
hexo -v

出现下面内容，即为安装成功

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
hexo-cli: 1.1.0
os: Windows_NT 10.0.16299 win32 x64
http_parser: 2.8.0
node: 10.6.0
v8: 6.7.288.46-node.13
uv: 1.21.0
zlib: 1.2.11
ares: 1.14.0
modules: 64
nghttp2: 1.32.0
napi: 3
openssl: 1.1.0h
icu: 61.1
unicode: 10.0
cldr: 33.0
tz: 2018c

接下来在G盘新建blog文件夹（可根据个人而定），用于作为hexo博客目录。现在在Git Bash进入到blog文件夹，然后在里面初始化为hexo博客目录

1
2
3
cd g:blog

hexo init

初始化成功信息如下

1
2
3
4
added 397 packages from 485 contributors and audited 2021 packages in 51.695s
found 0 vulnerabilities

INFO  Start blogging with Hexo!

然后安装依赖包

1
npm install

出现下面信息即安装完成

1
2
audited 2021 packages in 2.965s
found 0 vulnerabilities

下面输入命令来生成静态页面

1
hexo generate

输入启动服务命令

1
hexo server

可以看到一下信息

1
2
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

现在打开浏览器访问http://localhost:4000/即可看到，在Git Bash按Crl+c就会关闭网站。

note:如果出现防火墙提示，放行就可以了

部署网站到Github

Github仓库创建

  1. 新建一个仓库，命名方式：userName+’github.io’
  2. 点击Create Repository后，选择Setting进入设置
  3. 在Github Pages下点击Choose a theme选择一个主题
  4. 此时返回仓库再点击Setting既可以查看到github分配的域名

在git配置githun的邮箱与用户名

查看git配置信息

1
git config --list

配置github的邮箱

1
git config --global user.email "输入你的邮箱"

配置github的用户名

1
git config --global user.name "输入你的用户名"

重新输入查看git的配置信息会发现多了邮箱和用户名的配置

将本地的博客发布到github上

回到Git Bash，修改博客根目录的_config.yml文件，修改如下

1
2
3
4
deploy:
  type: git
  repository: https://github.com/LGG001/LGG001.github.io.git
  branch: master

然后安装部署插件

1
npm install hexo-deployer-git —save

最后部署到github上

1
hexo d

补充：生成SSH Key

在Git Bash中输入命令来生产SSH密钥

1
ssh-keygen -t rsa -C "1058901869@qq.com"

接着会要求输入密语字符串，直接回车跳过即可。然后会让输入2次口令，这里也直接输入两次回车跳过（使用3次回车就会生产一份公钥id_rsa.pub和一份密钥id_rsa，这两份密钥位于根目录下的.ssh目录下）

公钥需要在Github上的Settings-->SSH and GPG keys上配置，把生成好的公钥id_rsa.pub复制到key输入框中，然后为key起一个title来区分每个key。生成后Github会发一封邮件提醒

接下来回到博客根目录

1
cd g:blogs

修改_config.yml文件

1
vim _config.yml

修改deploy部分，如下

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

最后重新输入如下命令来重新发布到Github上

1
2
3
hexo clean
hexo g
hexo d

输入网址https://lgg001.github.io/即可访问博客了

发表文章

新建文章

在博客的目录文件夹下进入Git Bash，然后输入hexo new “博文名字”，如hexo new “Hexo:搭建个人博客”

在blogs\source_post目录下就会再到”博文名字”.md的文件，该文件的内容是使用MarkDown格式的，使用MarkDown编辑器编辑。个人推荐：MarkDownPad2

添加分类

在blogs\scaffolds目录下，修改post.md文件

1
2
3
4
title: {{ title }}
date: {{ date }}
categories:
tags:

观察成的”Hexo:搭建个人博客”文章内容

1
2
3
4
5
6
---
title: 'Hexo:搭建个人博客' #文章页面显示的名称
categories: #文章分类目录
date: 2018-07-20 23:23:06 #文章生成时间
tags: #文章标签
---

在文章下面就可以写自己的内容了。

如果想给文章添加图片的效果，在文章里面的头上添加photos选项即可

1
2
3
4
5
6
7
8
9
---
layout: photo
title: 'Hexo:搭建个人博客' #文章页面显示的名称
categories: #文章分类目录
date: 2018-07-20 23:23:06 #文章生成时间
tags: #文章标签
photos: 
- http://bruce.u.qiniudn.com/2013/11/27/reading/photos-0.jpg
---

使用描述、摘要

描述和摘要的使用如下

1
2
3
4
5
6
7
8
9
title: hexo你的博客
date: 2013-11-22 17:11:54
categories: default
tags: [hexo]
description: 你对本页的描述

以上是摘要
<!--more-->
以下是余下全文

使用图片

在Git Bash输入

1
npm install hexo-asset-image --save

重新创建一个博客名字，然后发现Hexo\source_posts下多了一个与博客名字相同的空文件夹,然后就可以把我们博客中要用到的图片存放在这个文件夹下，需要时直接引用即可.

安装主题（Next）

安装Next主题

关于Next的详细内容可以参考Next官方文档

安装Next主题只需要一条命令

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

安装完成后，打开博客的配置文件_config.yml文件，修改主题为next

1
theme: next

然后输入hexo s --debug在本地查看预览效果

打开themes\next目录，编辑主题的配置文件_config.yml

重新发布主题到Github上

1
2
3
hexo clean
hexo g
hexo d

-------------本文结束感谢您的阅读-------------
Thank You For Your Approval !