用Hexo搭建一个静态博客

840 阅读4分钟

该项目托管在gitee上,也建议托管在gitee上。

1.安装Node.js

点击这里下载LTS版本。

安装

2.打开终端

获取管理员权限:sudo su

查看当前目录:pwd

查看node版本:node -v

查看npm版本:npm -v

如果能查看到版本,则说明安装成功。

3.安装淘宝的cnpm管理器(为了加速下载)

npm install -g cnpm --registry=http://registry.npm.taobao.org

查看cnpm版本:cnpm -v

4.安装hexo框架

cnpm install -g hexo-cli

查看hexo版本:hexo -v

5.创建blog文件夹

例:我的是创建在projects文件夹下。

mkdir projects/blog/

6.进入blog目录

例:我的是创建在projects文件夹下。

cd projects/blog/


以下所有命令都在blog文件夹下操作

7.生成博客(初始化博客)

sudo hexo init

这里要等待很久,出现 Start blogging with Hexo! 说明生成成功。

8.启动本地博客服务

hexo s

在浏览器地址栏输入:localhost:4000

就能看到在本地生成的博客了。

回到终端按 ctrl c 退出本地博客服务。

9.安装git部署插件

cnpm install --save hexo-deployer-git

如果出现 fatal: index-pack failed 就是失败了。

10.下载yilia主题

本文使用yilia作为主题,建议新手这么做。也可以在github上找到自己喜欢的主题下载。

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

用命令下载可能会比较慢,建议直接去github上面下载(点击这里)然后解压并命名为yilia,放到blog/themes/下。

11.在gitee上新建仓库

点击这里并点右上角的加号->New Repository

Name和Path都填Owner上的文字(你的昵称)

(为什么这么命名,请参考帮助文档

New

会进入一个设置页,请复制https...git的地址。

12.修改 _config.yml 配置文件

修改blog下的 _config.yml

文件里都是键值对形式,值前面的空格一定要有

可以用命令去改:

​ 用vim打开:vim _config.yml

​ 到文件最下方::$

​ 到文件最上方::1

​ 进入INSERT模式:i

​ 退出INSERT模式: esc

​ 保存并退出::wq

​ 一共修改三处,添加一处,请替换以下括号及括号里的文字。

域名地址:https://(你的昵称).gitee.io/

git地址:https://gitee.com/(你的昵称)/(你的昵称).git

#修改url配置
url: (这是你的域名地址,例:https://xuanmichael.gitee.io/)
#修改主题配置
theme: yilia
#修改部署配置
deploy:
  type: git
  repo: (这是你的git地址,例:https://gitee.com/xuanmichael/xuanmichael.git)
  branch: master
#加上jsonContent(yilia主题要用)
jsonContent:
 meta: false
 pages: false
 posts:
  title: true
  date: true
  path: true
  text: false
  raw: false
  content: false
  slug: false
  updated: false
  comments: false
  link: false
  permalink: false
  excerpt: false
  categories: false
  tags: true

13.部署到服务器上

清理:hexo clean

生成:hexo g

部署:hexo d

看到 Deploy done: git 说明部署成功了。

这个时候回到你刚刚的设置页,会变成你这个项目的仓库页。

默认是Code,请找到Service,进入Gitee Pages.

点击Create,等待一会儿,会出现:Gitee Pages service is open, url: (这是你的域名地址,我的是:xuanmichael.gitee.io)

点击域名,就进入到你搭建的博客中了。

14.解决缺失模块(非yilia主题请跳过此步骤)

当你点击左边的所有文章的时候,会出现缺失模块的字样。

回到终端,执行以下命令:

npm i hexo-generator-json-content --save

hexo clean

hexo g

hexo d

若出现 Deployer not found: git

则需要再安装一次git部署插件:cnpm install --save hexo-deployer-git

hexo d

回到 Gitee Pages Services 点击 Update

15.查看博客

在浏览器地址栏中输入你的域名就行了,我的是:https://xuanmichael.gitee.io/


到这里,一个用hexo搭建的静态博客就完成了。

想在此基础上玩得更花,可以修改 **blog/themes/yilia/**下的 _config.yml

具体请参考这里的配置。

注意

更新了博客里的任何内容,请重新执行hexo的三个指令,并到 Gitee Pages Services 点击 Update

想停止服务,点击 Stop

想清空仓库,Settings->Clear->Clear repository

想删除仓库,Settings->Delete->Delete repository

服务器不一定立马更新,出现什么非服务器的大问题,可以删除blog文件夹重新搭建博客。

建议每次进行大的更新后(图片上传、布局变化等),浏览器都进行清空缓存并进行硬刷新

常用操作(在blog文件夹下操作)

新建文章(文章都是.md格式):hexo n "文章名称"

或者直接在 blog/source/_posts/ 下新建,不过建议用命令的方式新建。

删除文章,直接去 **blog/source/_posts/ **下,删除文章。

清理:hexo clean

本地预览:hexo s

生成:hexo g

部署:hexo d

如何写Markdown文章?

用命令新建好文章后,到 blog/source/_posts/ 下找到新建的文章,直接进去修改。

建议用Typora打开,用Vscode修改。

我要修改hello.md的文章:

里面的默认配置是:

title: hello
date: 2020-08-16 00:11:28
tags:

title是标题。

date是该文件的创建时间。

tags是标签:

tags: 测试

修改完成后,保存。

点击右下角出现的 Retry as Sudo

输入密码。

保存成功。

hexo g

hexo d

到 Gitee Pages Services, Update 一下。