[博客建设一]Hexo静态站点搭建

利用githubPages部署hexo静态博客的基础流程, 绑定域名, 和有关hexo的使用
笔者也是小白, 看了一些网络上的教程不断摸索, 希望能对你有帮助

准备

1. github账号
2. npm(要用到node自带的包管理工具npm)
3. git(方便部署到github, 以及后期进行更新)

搭建hexo环境

1. 安装hexo-cli (hexo 命令行工具 Command Line Interface)
   创建一个文件夹, 进入打开git bash, 输入命令

1

npm install -g hexo-cli

2. filename填写你的博客文件夹名, 如果不写文件夹名就默认在当前目录下创建

1

hexo init <filename>

得到文件如下:

1. 启动本地sever预览

1

hexo sever

可以在localhost:4000查看, 默认的主题是landscape

部署到githubPages

我用一个新的账号演示

1. 安装一个方便部署的插件hexo-deployer-git

1

npm install hexo-deployer-git

2. 在github创建一个仓库

3. 修改_config.yml

1
2
3
4
5
6
7

# repo填写ssh秘钥, branch填写分支名称

deploy:
  type: 'git'
  repo: 'git@github.com:hacr1024/hacr1024.github.io.git'
  branch: 'main'

还有一处:

1
2
3
4
5
6

# URL

## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'

url: https://hacr1024.github.io

_config.yml中有许多其他可以自行配置的属性

自定义主题

hexo官网有许多主题样式, Next比较常见, 我使用的是inside, 一个很简洁治愈的主题

1

npm install hexo-theme-inside

修改theme

1

theme: inside

然后输入:

1

hexo clean && hexo g && hexo s

可以看到主题已经变更

输入:

1

hexo d

部署完成, 可以正常通过域名访问

hexo常用基础命令

1
2
3
4
5
6
7

hexo s		// 启用本地服务器
hexo d		// 部署
hexo clean  // 清除文件
hexo g 		// 生成文件
hexo new [layout] <filename>      //  在`source`目录下新建一个`.md`文件,layout属性默认有三种`[post][draft][page]`, 默认是post, 可以在配置文件中更改.
hexo publish [layout] <filename>   // 将指定草稿发布

一般我们写好一个文件直接

1

hexo clean && hexo d

或者增量部署

1

hexo d -g  

就完成了站点的上传更新

主题配置

你可以直接进入node_modules中主题文件的_config文件中配置, 也可以新建一个_config.yourTheme.yml.的文件, 将主题的_config内容复制到该文件中进行配置
inside主题的配置之后的文章会讨论

给站点添加域名

可以到域名服务商, 阿里云, 腾讯云之类去购买一个域名, 域名价格差异很大, 我买的域名是腾讯云的首年7块.
进入控制台添加两条解析记录

记得将_config.yml中的url也改成你的域名

进入github仓库setting的pages下, 添加Custom domain, 强制HTTPS能免费添加一个SSL证书

之后你会看到仓库中多了一个CNAME文件

解决每次重新部署都需要重新填写custom domain的问题

在source目录下, 添加一个CNAME文件, 里面只用填写一条你的域名

关于warning: LF will be replaced by CRLF

Git提示“warning: LF will be replaced by CRLF”最详细解释+解决方案

参考:

1. hexo官网
2. Hexo-零基础搭建个人博客(详解)