保姆级教学 基于Hexo搭建个人网站（Github）
搭建Hexo静态博客先容
老久没更新了 做这一篇博客的初志也是想曝光我的网站 下面是地址 接待大家赏脸访问（可能比力卡）
访问我的网站
https://waitayaka.github.iohttps://i-blog.csdnimg.cn/blog_migrate/80873e6a5ca0e461c59807cfea9c994e.png
[*]然后网站内里也有很多这里没有的文章 大家也可以去看一看
https://i-blog.csdnimg.cn/blog_migrate/791aed6e720ee4b068555e96ea529242.png
一、注册Github账号
视频教程点击我
二、 安装前置软件包
[*]Git https://git-scm.com/download/win
[*]VSCode https://code.visualstudio.com/
[*]Typora
[*]Node.JS https://nodejs.org/en
三、 绑定github仓库
创建SSH私钥
[*]打开Git Bash输入
git config --global user.name "你的Github用户名"
git config --global user.email "你的邮箱"
[*]创建SSH私钥
$ ssh-keygen -t rsa -C "2187988995@qq.com"## 输入自己的邮箱
Generating public/private rsa key pair. //以下选项都回车 什么都不用输入
Enter file in which to save the key (/c/Users/21879/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/21879/.ssh/id_rsa
Your public key has been saved in /c/Users/21879/.ssh/id_rsa.pub
The key fingerprint is:
SHA256:i++Oohyq3eWhzqArA4Z0WuEVD2qUwBz8+gB40JG6zPA 2187988995@qq.com
The key's randomart image is:
+-------+
|++++.o. |
|.++o..o |
|.oooo. |
|=.o= |
|B+= S |
|+BE . . |
|o = + . |
|o= *.+ + |
|Bo+o=.oo+ |
+---------+
[*]查看生存ssh密钥的文件夹 一般都在C:\Users\你的用户\.ssh
https://i-blog.csdnimg.cn/blog_migrate/f950a4485bd9c5a4d349cb409fbc4d9d.png
添加私钥
https://i-blog.csdnimg.cn/blog_migrate/b4fc50a3a5de187a1aba37fa0463d555.png
https://i-blog.csdnimg.cn/blog_migrate/e90b261cab7bb067025420be9cb2be1c.png
https://i-blog.csdnimg.cn/blog_migrate/65b2ad9e54f6b01497cd00011f8e5534.png
https://i-blog.csdnimg.cn/blog_migrate/875da90a30809bb6d4e26f78d4603589.png
https://i-blog.csdnimg.cn/blog_migrate/4849279409cfd6c4e6c9cc7a334667ba.png
毗连Github仓库
[*]在.ssh文件夹下创建config文件
https://i-blog.csdnimg.cn/blog_migrate/137470cfb9f63ba7df4e1ef41c852885.png
[*]在config文件中添加以下内容
Host github.com
HostName ssh.github.com# 这是最重要的部分
User git
Port 443
PreferredAuthentications publickey
IdentityFile ~/.ssh/id_rsa
[*]测试毗连ssh库
$ ssh git@github.com
The authenticity of host ':443 (:443)' can't be established.
ED25519 key fingerprint is SHA256:+DiY3wvvV6TuJJhbpZisF/zLDA0zPMSvHdkr4UvCOqU.
This key is not known by any other names.
Are you sure you want to continue connecting (yes/no/)? yes
Warning: Permanently added ':443' (ED25519) to the list of known hosts.
PTY allocation request failed on channel 0
Hi WaitAyaka! You've successfully authenticated, but GitHub does not provide shell access.
Connection to ssh.github.com closed.//显示 HI `你的用户名`！即为连接成功
四、安装hexo
1. 更改npm镜像源
`进入cmd`
npm config set registry https://registry.npmmirror.com
2. 创建一个文件夹 在内里打开终端
[*]使用npm安装hexo
npm install -g hexo-cli
3. 初始化hexo
hexo init
`初始化完成 后显示`
INFOCloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFOInstall dependencies
INFOStart blogging with Hexo!
[*]运行博客
hexo g //生成更改内容
hexo s
//运行本地网页服务
[*]
D:\My Blogs>hexo s
INFOValidating config
INFOStart processing
INFOHexo is running at http://localhost:4000/ . Press Ctrl+C to stop.
https://i-blog.csdnimg.cn/blog_migrate/0fe06753367005ad9d531a470c125d88.png
可以使用本身喜欢的主题 可以在网上自行搜索
这里使用particleX 因为很好看
[*]主题官方文档
https://github.com/theme-particlex/hexo-theme-particlex
五、切换主题
1. 安装主题
cd themes
git clone git@github.com:theme-particlex/hexo-theme-particlex.git particlex --depth=1
2. 修改默认主题
[*]在根目录 _config.yml 设置主题为 ParticleX 即可
https://i-blog.csdnimg.cn/blog_migrate/9cde884ff9a7df5301063786fe0c43ec.png
https://i-blog.csdnimg.cn/blog_migrate/7ad57fc35031d5af1495c378766edec1.png
查看修改主题后的网站
hexo s
https://i-blog.csdnimg.cn/blog_migrate/802b156c7b70ae72b0ca7f170c32a1c1.png
六、主题美化
1. 修改主题标签
还是_config.yaml文件 任意修改以下参数 修改完后记得ctrl+s生存配置
https://i-blog.csdnimg.cn/blog_migrate/3818653cbf9c903dbed33d6b41ac8870.png
重新启动hexo服务
hexo s
https://i-blog.csdnimg.cn/blog_migrate/3aa3422cdcb905cc76faaeba7767aea0.png
2. menu 主页菜单导航
必要我们进入到主题的_config.yaml进行配置
[*]进入之后找到menu选项
[*]https://i-blog.csdnimg.cn/blog_migrate/735688962c5ab41851357e2241df8870.png
我们可以更改Home About这些的定义 比如将Home 换成主页 About 换成关于
https://i-blog.csdnimg.cn/blog_migrate/7470db73584b5ef1b54a3193faa2ca63.png
查看修改后结果
https://i-blog.csdnimg.cn/blog_migrate/d2c7229b47fbcda97c0e096eeddeb197.png
menu:
主页:
name: house
theme: solid
link: /
# 关于页面链接：
关于:
name: id-card
theme: solid
link: /about
# 存档页面链接
存档:
name: box-archive
theme: solid
link: /archives
# 分类页面链接
分类:
name: bookmark
theme: solid
link: /categories
# 标签页面链接
标签:
name: tags
theme: solid
link: /tags
七、Hexo常用命令
hexo clean //清除hexo缓存hexo g //重新生成hexohexo s
//运行本地服务器hexo d //将hexo推送到设置好的服务器上hexo new xxx //新建博文hexo new page xxx //新建页面 博文新建好会存到/<博客根目录>/souce/_post中
采取MarkDown语法
1. 创建新页面
D:\My Blogs\themes>hexo new page "about"
INFOValidating config
INFOCreated: D:\My Blogs\source\about\index.md
[*]进入Created: D:\My Blogs\source\about\index.md
https://i-blog.csdnimg.cn/blog_migrate/432c12e4efa7039a418ccac39b95b38a.png
[*]访问关于页面
https://i-blog.csdnimg.cn/blog_migrate/3b0b308e54f4614f06eef2f7d626f14a.png
2. 创建博文
D:\My Blogs\themes>hexo new "你好Hexo"
INFOValidating config
INFOCreated: D:\My Blogs\source\_posts\你好Hexo.md
进入 D:\My Blogs\source\_posts\你好Hexo.md
https://i-blog.csdnimg.cn/blog_migrate/f99b3ee71e021508d9cdb3f225a6539b.png
https://i-blog.csdnimg.cn/blog_migrate/a8c63a91ee34b9ff9a9f3ebdfbb9aede.png
https://i-blog.csdnimg.cn/blog_migrate/0ad9ecff5c80b75c8e268cac6b8c96e0.png
八、推送hexo到github.io上
1. 修改本地博客配置文件
在本地博客中找到_config.yaml找到deploy部分
https://i-blog.csdnimg.cn/blog_migrate/ce8bd46e0052be0c7bbdcf2ef545b95c.png
repo: 后面接上你的github仓库地址
2. 下载插件
npm install hexo-deployer-git --save
[*]在命令行中输入
hexo clean //清除缓存
hexo g //生成更改
hexo d //推送到服务器
https://i-blog.csdnimg.cn/blog_migrate/1c1bdc79b80512a5d24ab5d702950285.png
[*]上传的过程
D:\My Blogs\themes>hexo d
INFOValidating config
INFODeploying: git
INFOSetting up Git deployment...
Initialized empty Git repository in D:/My Blogs/.deploy_git/.git/
First commit
1 file changed, 0 insertions(+), 0 deletions(-)
create mode 100644 placeholder
INFOClearing .deploy_git folder...
INFOCopying files from public folder...
INFOCopying files from extend dirs...
warning: in the working copy of '2024/04/13/hello-world/index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of '2024/04/13/浣犲ソHexo/index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'about/index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'archives/2024/04/index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'archives/2024/index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'archives/index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'css/main.css', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'js/lib/crypto.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'js/lib/highlight.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'js/lib/home.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'js/lib/math.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'js/lib/preview.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'js/lib/search.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'js/main.js', LF will be replaced by CRLF the next time Git touches it
Site updated: 2024-04-13 22:12:36
19 files changed, 2778 insertions(+)
create mode 100644 2024/04/13/hello-world/index.html
create mode 100644 "2024/04/13/\344\275\240\345\245\275Hexo/index.html"
create mode 100644 about/index.html
create mode 100644 archives/2024/04/index.html
create mode 100644 archives/2024/index.html
create mode 100644 archives/index.html
create mode 100644 css/main.css
create mode 100644 images/avatar.jpg
create mode 100644 images/background.jpg
create mode 100644 images/loading.gif
create mode 100644 index.html
create mode 100644 js/lib/crypto.js
create mode 100644 js/lib/highlight.js
create mode 100644 js/lib/home.js
create mode 100644 js/lib/math.js
create mode 100644 js/lib/preview.js
create mode 100644 js/lib/search.js
create mode 100644 js/main.js
delete mode 100644 placeholder
info: please complete authentication in your browser...
Enumerating objects: 34, done.
Counting objects: 100% (34/34), done.
Delta compression using up to 16 threads
Compressing objects: 100% (25/25), done.
Writing objects: 100% (34/34), 1.81 MiB | 906.00 KiB/s, done.
Total 34 (delta 4), reused 0 (delta 0), pack-reused 0 (from 0)
remote: Resolving deltas: 100% (4/4), done.
To https://github.com/WaitAyaka/Ayaka.github.io.git
* HEAD -> main
branch 'master' set up to track 'https://github.com/WaitAyaka/Ayaka.github.io.git/main'.
INFODeploy done: git
推送到互联网
https://i-blog.csdnimg.cn/blog_migrate/3872e58d30dc7b5b132a7d526446b32b.png
[*]选择main 并生存
https://i-blog.csdnimg.cn/blog_migrate/dceacbd2fc401f855299651dda120af0.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]