Hexo搭建个人博客，过年回村儿得瑟！

# hexo # 博客搭建

Thursday , 2021-12-30 11:41

我的博客>>

大抵是又要过年了，横竖睡不着，半夜惊醒启动电脑，打开vscode让我一阵眩晕，振作精神仔细看了一阵，才从代码高亮中看出字来，满屏都闪现着：“买车、买房、压岁钱、月薪、七姑八姨、别人家…”这些字眼，后来我想，我大抵是病了，不轻的那种！

安装

老规矩，先看 官网地址，里面啥都有，本文主要是描述一下流程，具体保姆级的操作，贴出相关文档自行查阅即可。

Hexo相较于WordPress部署成本更小，主题库嘛还行，不过因为内容的限制，基本都比较同质化，当然自己可以二次开发，只要你忍得住写 EJS 的语法不抓狂，问题不大！

前置条件，Node 与 Git ,相信有心搭建博客的老哥，这些都不用多说，全局安装一二。

1
$ npm install -g hexo-cli

全局安装完成，直接创建项目

1
$ hexo init myHexoProject

如果报错可以尝试 npx ,npx的原理，就是在运行它时，执行下列流程：

  1. 去node_modules/.bin路径检查npx后的命令是否存在，找到之后执行；
  2. 找不到，就去环境变量$PATH里面，检查npx后的命令是否存在，找到之后执行;
  3. 还是找不到，自动下载一个临时的依赖包最新版本在一个临时目录，然后再运行命令，运行完之后删除，不污染全局环境。
1
$ npx hexo init myHexoProject
1
2
$ cd myHexoProject
$ npm install

安装完成，npm run server 就能在本地启动一个抽而实用的初始化项目

image.png

书写

现在你有了基础工具，心中的创作冲动已经安耐不住，此刻你韩寒，鲁迅，郭敬明，琼瑶，宁财神附体，感觉自己一篇文章下去，不说震动文坛，起码能引爆朋友圈吧。如果有这个骚年，想法请在评论区扣个1，我好知道是不是只有我这么不要脸！

此时你要做的就是把你的想法显示在屏幕上，layout 默认是文章post 属性,如果你刚开始操作，不写也行，官方命令如下

1
2
3
4
$ hexo new [layout] <title>

//eg:
$ hexo new "文坛新星冉冉升起！"

此时你生成的文件将出现在 source/_posts/文坛新星冉冉升起!.md ，此时全世界人民的老朋友Markdown语法出现在你的面前，如同在三维进入跌落的四纬碎片，一切都变得透彻清晰了！Hexo就是通过soure里面的.md文件生成了对应的静态文件项目。

1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: 文坛新星冉冉升起！
date: 2021-12-30 16:19:21
tags:
- 自定义标签1
- 自定义标签2
categories:
- 分类1
- 分类2

这里写一些自己的内容

---

当然这只是最简单的创建方式，还有很多配置跟功能看 官方文档

主题配置

此时你的表达欲望已经被满足，但是作为一个上进的人，一个高级的人，一个脱离了低级审美趣味的人，这个默认主题界面，岂能入得了你的法眼？我们要想办法满足审美上的需求才行啊！！！这事儿耽搁不得。

Hexo当然也有很多 社区主题 供你选择，比如你打算临幸 这个主题 https://github.com/dewjohn/hexo-theme-blank ,一般开发者都会在下面写入常规配置及下载方式，主题目录在themes/主题文件夹,安装当前主题文件之后，在_config.yml文件中找到themes：你的主题名称,然后刷新一下，主题效果就已经呈现了。

主题自己开发会比较麻烦，ejs的语法会让你比较抓狂，个人建议可以招一个比较符合需求的主题，配合Hexo的Api，做二次开发会比较省事儿。

部署

重点来了，目前你的博客在本地，只能你自己看，如果不能发出去装逼，那折腾个什么劲儿！于是我们要想办法部署出去，作为资深白嫖党，花钱买服务器是不可能的！

此时你作为救世主的你，有两个选择：

QQ截图20211230164230.png

首先是是码云

image.png

国内码云可以配置gitee pages，但是现在需要实名认证，反正那啥，发文章就得悠着点儿，别该说不该说的都往上写，而且实测做个人域名转发是无法成功的，所以这个方式不太推荐，如果你想要比较快的国内访问速度，对域名跟内容都没啥特殊要求，也可以考虑！

npm run build 会执行 hexo generate 命令，在public下会生成最新的静态文件网站，page首页指向他即可，当然你可以直接npm run deploy直接部署，此时仓库只会上传public中的文件,部署配置在 _config.yml

1
2
3
4
5
deploy:
  type: git
  # 填上你自己的仓库名，注意后面有`.git`
  repository: https://gitee.com//myname/xxxx.githup.io.git
  branch: master

image.png

这里重点说一下github的部署

image.png

你需要新建一个公开仓库，这个仓库的名称必须是 账户名.github.io ，仓库完成后，我们将 _config.yml的deploy的repository配置为当前仓库名。

此时你执行npm run deploy即可将当前重新生成的public静态站点上传到远程仓库，做如下配置即可

image.png

部署加载完成后，理论上你就可以通过账户名.github.io访问到你的内容。

下面是付费内容，请谨慎阅读！

域名自定义

至此，你已经拥有了自己的博客网站，但是总觉得差了点意思，对了，是域名，人家一看你这域名就暴露了，作为一个体面的博客，必须有一个自己的域名，我就是我，域名也要是不一样的烟火，烟毕，三思之后决定：氪金！

遂可斥巨资在阿里云买了个域名 ，简单的实名验证后即可使用，现在的问题是如何通过这个域名访问账户名.github.io

打开域名管理，添加两条解析记录如下

image.png

然后在github设置中，设置自定义域名访问

image.png

image.png
完成后等待几分钟，应该就能通过域名正常访问了。

文章中的静态图片管理

这里用到了PicGo，将文件上传到码云（比较快），然后引用，git地址

image.png

插件先下载gitee,

image.png

在码云新建一个仓库static-image，上传配置如下

image.png

image.png

在PicGo中按照所设置的内容配置即可，如下：

image.png

完成之后，即可在相册看到当前传入的图片

image.png

一些常见问题

本地服务器跑的好好的，deploy上去各种主题样式混乱？

可以尝试npm run clean 清除原文件后，在打包发布一次试试看！

deploy之后是打包后的文件目录，我想同时保存源码怎么办？

deploy的配置与项目的git配置是分开的，你可以重新建一个保存源码的项目用来保存更改，发布配置账户名.github.io的项目即可，这样能保证你随时可以在不同的设备拉下来项目发布新文章。

为什么我每次deploy之后git的自定义域名就会失效，要重新配置怎么办？

在source文件夹下新建CNAME文件，里面写入自定义域名即可，如下

image.png