Hexo+Github+Next搭建个人博客

使用Github和Hexo搭建个人博客,并且用Next主题进行美化。
本地环境: Ubuntu 18.04.3 LTS

前言

虽然已经有了用wordPress搭建了一个博客站点,但是主题和界面说实话,着实有点朴素,然后Ta没了最经在看题解的时候,发现Github+Hexo+Next配置出来的网站十分好看,用Hexo+Github搭建了一个新的博客

教程

本地环境
系统: Ubuntu 18.04.3 LTS
Node.js版本: v12.12.0
npm版本: 6.11.3

前置知识

  • gitgithub的基本使用
  • 简单的bash操作

网站预览

ForTest

安装 Node.js

Hexo 使用的 Node.js,这里建议在官网下载 Node.js,下载地址 | Node.js,下载二进制文件(Linux Binaries x64)。

移动到下载的位置执行

1
2
3
4
5
6
#解压你下载的文件
tar -xvf node-v12.12.0-linux-x64.tar.xz #最后一个是你下载的二进制文件

#移动解压缩后的文件夹
#需要root权限
mv node-v12.12.0-linux-x64 /opt/node-v12.12.0-linux-x64

然后是改变系统的环境变量,这步需要root权限,打开/etc/profile文件在底部添加

1
2
3
#SET PATH FOR NODEJS
export NODE_HOME=/opt/node-v12.12.0-linux-x64
export PATH=$NODE_HOME/bin:$PATH

重新加载/etc/profile,或者重启电脑使配置生效

1
source /etc/profile

这样我们就安装完成Node.js了,在终端以下命令来检测是否安装成功

1
2
3
4
node -v
#成功会输出版本号
npm -v
#成功会输出版本号

安装 Hexo

我们使用这个命令来安装Hexo,安装时间可能会很长。可以去泡杯茶,看个报纸什么0.0

1
npm install hexo-cli -g

安装成功后,我们随便找个地方建立一个文件夹,建立完毕后在文件夹下 输入以下命令,这个时间可能也会有点长。可以去补个番,看个剧什么233

注: Hexo框架和以后写的文章都在这个文件夹内,教程里面建立文件夹名字是MyWebsite

1
hexo init

以上都准备完毕后,我们可以依次输入下面3条命令,然后在浏览器里面打开localhost:4000,来康康我们的网站雏形

1
2
3
4
5
6
#清楚缓存和已生成的静态文件
hexo clean
#生成静态文件 是 hexo generate 的简写
hexo g
#启动服务器。是 hexo server 的简写
hexo s

接下来是一些简单的hexo命令介绍

命令 作用
hexo new “XXX” 新建 “XXX” 文章
hexo clean 清楚缓存和已生成的静态文件
hexo g 生成静态文件。是 hexo generate 的简写
hexo d 部署网站。是 hexo deploy 的简写
hexo s 启动服务器。是 hexo server 的简写

配置Github

  1. 新建立一个仓库,并且仓库的名字为 XXX.github.io,这边要强烈注意!!!! , XXX必须是你Github的用户名,即图中两个箭头指向的地方要相等。

由于我已经建立,所以Github上会有警告显示。

xxx.github.io

  1. 移动到刚刚hexo建立的文件夹下,打开_config.yml文件,这个文件是站点的配置文件夹。在文件夹下面找到下述文字并更改。
1
2
3
4
5
6
7
8
9
10
11
12
13
#寻找的文字
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:
repo:

#更改为
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/XXX/XXX.github.io.git #XXX就是你的名字
  1. 然后我们在文件夹下面依次输入以下命令,之后输入github的登陆邮箱和密码,就部署完成了。
1
2
3
4
5
hexo clean
hexo g
hexo d
#输入github的登陆邮箱
#输入github的登陆密码

这样我们就能通过你的Github用户名.github.io来访问自己的博客网站了。

设置 next 主题

在文件夹下面输入以下命令

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

打开站点的 _config.yml 搜索并且更换

1
2
3
4
5
6
7
8
9
10
11
#寻找的文字
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme:

#更改为
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

重新执行 hexo cleanhexo ghexo d,来生效。

站点的基本配置

打开站点的 _config.yml ,进行更改即可。

1
2
3
4
5
6
7
8
# Site
title: #站点的标题
subtitle: #站点的副标题
description: #描述
keywords: #关键字
author: #博客的作者
language: #语言代码详见文档 中文用zh-CN
timezone: #时间 一般用 Asia/Shanghai

参考文章

Hexo中文文档
GitHub+Hexo 搭建个人网站详细教程 - 吴润
linux入门-nodejs的安装及配置-MsgSS



--------------------------END--------------------------
喜欢的话,不妨请我喝杯奶茶(≧∇≦)ノ