博客搭建流程(0基础开始向)
(使用GitHub+Hexo)
一、注册GitHub
1.访问GitHub
访问GitHub方法:
1.访问http://www.github.com.ipaddress.com/,查看GitHub的IP地址
2.找到C:\windows\System32\drivers\etc\host文件,在最后添加新的一行,内容为GitHub的IP地址和网址,中间用空格分开,如下,保存好
1 | 140.82.112.4 github.com |
3.打开终端,输入如下指令刷新配置
1 | ipconfig /flushdns |
二、安装Git(我安的2.35)
原参考知乎安装教程:个人博客第2篇——Git 2.25.0详细安装步骤 - 知乎 (zhihu.com)
git官网:Git (git-scm.com)
三、绑定GitHub并提交文件
GitHub上可以直接提交文件,远程仓库与本地仓库可以通过SSH协议或者HTTPS协议这两种方式连接,我们这里用SSH来完成GitHub的绑定并提交文件
SSH(安全外壳协议,Secure Shell 的缩写)是建立在应用层基础上的安全协议。SSH 是目前较可靠,专为远程登录会话和其他网络服务提供安全性的协议,利用 SSH 协议可以有效防止远程管理过程中的信息泄露问题。简单来说,SSH就是保障你的账户安全,将你的数据加密压缩,不仅防止其他人截获你的数据,还能加快传输速度。
1.绑定GitHub
打开GitBashHere,用【ssh-keygen -trsa】命令在本机生成公钥(id_rsa.pub)和密钥(id_rsa),将公钥的文本内容复制到GitHub网站里我的SSHKey里面。(默认公钥密钥生成路径为:C:\Users\用户名\.ssh\id_rsa.pub)
注:git里面的复制粘贴是Ctrl+ Insert 和 Shift+ Insert
如下图所示,打开你的GitHub👉右上角小头像展开👉Settings👉SSH and GPG keys👉new key👉输入Title(可不填)和Key👉Add SSH key

1 | 23163@▒ҵĶ▒▒ӽ▒▒▒▒▒ MINGW64 /h/GitWorkSpace |

验证是否成功:
1 | ssh -T git@github.com |
打入yes回车:
1 |
|
2.提交文件
(1)本地没有git仓库
①直接将远程仓库克隆到本地

在准备储存仓库的目录下GitBashHere,输入指令【git clone 刚刚复制的仓库地址】
1 | 23163@▒ҵĶ▒▒ӽ▒▒▒▒▒ MINGW64 /h/GitWorkSpace/myRepository01/myRepository01 (main) |
打开仓库存储目录检查是否与远程仓库一致
②将新建的文件添加并commit到本地仓库
1 | git add <fileName> //将某文件添加到临时缓冲区/暂存区,若有多个文件,则文件名中间用空格分隔开即可! |
如果是第一次提交会让你输入用户名和邮箱,按如下格式添加即可:
1 | git config --global user.name "自己的GitHub用户名" |
其他指令
1 | git log //查看仓库提交日志 |
③将本地仓库的内容push到远程仓库
最后将本地仓库提交到远程仓库:
1 | git push origin master //这里的master在后来的git版本中是main,所以需注意跟自己gitbash窗口中保持一致即可 |
第一次会弹出这个账户认证窗口
点击登录,会跳转到默认浏览器里,输入账户密码登录后,跟着步骤确认就行了,GitBash窗口会在操作完成后自动push的。
(2)本地有git仓库,并且我们已进行了多次commit操作
①建立本地仓库
建立仓库文件夹,在这个文件夹内GitBashHere,使用git init命令创建/初始化这个仓库
1 | 23163@▒ҵĶ▒▒ӽ▒▒▒▒▒ MINGW64 /h/GitWorkSpace/myRepository01/demo01 |
②关联远程仓库
1 | $ git remote add origin https://github.com/KQ2316336903/myRepository01.git |
(3)总结:
先绑定本地仓库,将远程仓库文件同步到本地(git clone
和git pull
),然后后续有了文件变化时将本地变化git push
到远程仓库。
一次性
git add
多个文件(夹):1
2
3
4
5git add . //提交所有被修改和新建的文件,但不包括被删除的文件
git add -a //all,提交所有已被修改和删除的文件,但不包括新建文件
git add -u //update,更新/提交所有已改变的文件
3.其他配置
①删除本地仓库
删除Git本地仓库的根本原理是删除“Git本地仓库”⾥⾯的根⽬录下⾯的隐藏⽂件夹“.git”
②解决中文名文件无法显示和提交的问题
git bash终端输入
git config --global core.quotepath false
窗口界面空白处右键选择“Options”,Text>Loacle设置为zh_CN和UTF-8即可
四、购买域名
不买也行,没影响
五、安装Node.js和Hexo
1.Node.js
①安装
官网网址:
除了安装位置没什么改动的,一直next安装好就行了
安装好后可以打开终端检查下
1 | C:\Users\23163>node -v |
②配置
设置npm在安装全局模块时的路径和环境变量,因为默认会安C盘,而且后续Hexo可能无法正常使用
先在软件安装目录下新建两个文件夹:node_cache和node_global;
打开终端,根据自己安装的目录输入以下指令
1
2
3C:\Users\23163>npm config set prefix "G:\Nodejs\node_global"
C:\Users\23163>npm config set cache "G:\Nodejs\node_cache"设置环境变量:
- 新增系统变量:
编辑用户变量PATH,新建如下:
验证:
以管理员身份运行终端,执行npm install webpack -g:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15C:\WINDOWS\system32>npm install webpack -g
added 71 packages, and audited 72 packages in 40s
8 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
npm notice
npm notice New patch version of npm available! 8.5.0 -> 8.5.5
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.5.5
npm notice Run npm install -g npm@8.5.5 to update!
npm notice
C:\WINDOWS\system32>
2.Hexo
①先在GitHub上建立一个新仓库
名称格式为“你的用户名.GitHub.io”

创建好后点击Setting,看到如下内容表示这一步完成

②安装Hexo
- 首先在G盘新建一个文件夹Blog,进入并GitBashHere,输入npm命令安装Hexo:
1 | npm install -g hexo-cli |

*此时hexo安装目录下是没有东西的!
安装完成后,输入hexo init初始化博客
hexo g静态部署

- 这时网站已经部署完成,输入hexo s可以查看

浏览器地址栏可以输入上图中HEXO提供的网址进行访问:
Ctrl + c停止运行服务器
3.将Hexo部署到GitHub
①打开Blog文件夹中的【_config.yml】文件,在最后加上如下内容:
1 | deploy: |
②在Blog文件夹内GitBashHere,输入如下命令安装Git部署插件:
1 | npm install hexo-deployer-git --save |

③然后分别输入以下三条命令:
1 | hexo clean //清除缓存文件db.json和已生成的静态文件public |
弄好之后就可以在浏览器访问你的网页了!
4.卸载Hexo
首先在安装目录下执行指令:
1 | npm uninstall hexo-cli -g |
再删除Blog文件夹即可
六、Hexo食用指南
1.hexo项目结构
1 | . |
①_config.yml文件:配置文件
1 | ... |
②scaffolds文件夹:模板文件夹
模板文件夹,里面存放了3个模板文件,依次是草稿模板,页面模板和文章模板。
当我们使用hexo命令生成草稿、页面或者文章的时候,就是复制这些模板。
1 | ├── draft.md //草稿 |
post文章模板:
1 | --- |
③source文件夹:资源/源码文件夹
项目根目录下除_post文件夹之外,以_(下划线)开头命名的文件和隐藏的文件在后续解析和部署时都会被忽略;markdown和html文件会被解析并放到public文件夹内,而其它文件会被拷贝过去。
④themes文件夹:hexo主题存放文件夹
存放下载的主题文件
2.写作
1 | hexo s //hexo server,运行hexo服务 |
文章顺序
hexo文章默认是按照创建时间为顺序倒序排列的,因此要改变文章展示顺序,应修改文件头内的date字段的时间;
Front-matter文件头
1 | --- |
预定义的参数:
1 | 参数 描述 默认值 |
3.主题安装和配置
网友主题推荐:Icarus、Butterfly、next、volantis、fluid等等
butterfly:Hexo-Butterfly主题(🦋 A Hexo Theme: Butterfly-Official website) (butterfly1.cn)](https://www.butterfly1.cn/index.html)
next:NexT 使用文档 (iissnan.com)](http://theme-next.iissnan.com/)
volantis:https://volantis.js.org/
fluid:https://hexo.fluid-dev.com/docs/
①主题下载:
GitHub上找到主题所在的仓库,要么用git命令克隆到本地,要么下载压缩包后解压到本地:
方法一,git克隆仓库
1 | git clone 仓库所在地址 themes/主题名 //这里的主题名自定义,在themes下会生成一个以此命名的文件夹存放主题内容 |
这种方式应用的主题在更新时只需【git pull】即可!
方法二,下载压缩包解压
解压至路径【~/themes/主题名】下,该路径下要有主题的配置文件【_config.yml】
②主题应用:
将项目根目录下的配置文件【_config.yml】文件中的【theme: xxxxxx】字段改为要应用的主题名,重启服务即可
③主题配置
主题存放目录下会有主题自己的配置文件【_config.yml】,更改里面的配置信息即可更改主题样式
一般具体的配置方法都会在主题官网的帮助文档里说明。