博客搭建教程

一、安装git

先安装git，并添加系统环境变量
在win+r 输入 git -v 出现版本即可

二、安装nodejs

安装nodejs，安装时选择添加系统环境变量(PATH)即可若无勾选，手动添加
在win+r 输入 node -v 出现版本即可
输入 npm -v 出现版本说明均安装成功

三、安装hexo

npm install -g hexo-cli # 全局安装
说明: -g 表示全局安装，hexo-cli 为所安装的包
默认安装在C:\Users\用户名\AppData\Roaming\npm
hexo -v # 查看hexo版本出现版本即为安装成功

3.1 创建文件夹

此文件夹作为我们写博客内容的固定文件夹(方便管理)

进入到文件夹，在cmd下打开

hexo init #初始化博客

目录下文件说明
_config.yml 是用户配置文件
source 是博客文章(markdown格式)文件夹
themes 是博客主题文件夹

3.2 hexo的使用

hexo g(或hexo generate) # 生成静态网页文件(public文件夹)
hexo s(或hexo server) # 启动本地服务(默认端口4000)进行访问
hexo clean # 删除 public 文件夹，即删除旧的博客文章
hexo d(或hexo deploy) 将博客推送到 github
hexo new page dirname # 新建一个文件夹
hexo new 'title' # 新建一个博客文件

3.3 hexo同步到github

npm install hexo-deployer-git –save 安装 hexo-deployer-git 插件，同步需要用到

3.3.1 生成公私钥

1、首先打开电脑文件夹，找到 C:\Users\您的用户名\ .ssh文件夹并删除(如果没有，则直接进入第二步)

2、在Git Bash Here输入命令:
ssh-keygen -t rsa -C “你的github登录邮箱” 生成.ssh秘钥，输入后连敲三次回车

3、生成了一个新的 C:\Users\您的用户名\ .ssh文件夹，打开这个文件夹，找到 .ssh\id_rsa.pub 文件，记事本打开并复制里面的容

4、打开您的 github 主页，进入个人设置 -> SSH and GPG keys -> New SSH key，把复制的内容粘贴进去，title 随便填，保存即可，我们的公钥就添加成功了。

5、检测是否设置成功:
输入命令: ssh -T git@github.com 出现成功即可

3.3.2 编辑_config.yml

deploy:
type: git
repository: git@github.com:用户名/用户名.github.io.git
branch: master
注：其中 repository 中的内容即为 github 个人主页链接地址

3.3.3 同步到github

hexo d 将博客推送到 github

四、 hexo主题配置

https://hexo.io/themes/

4.1 下载主题

4.1.1 下载主题

挑选自己的博客主题，复制github链接
git clone 主题http链接 themes/主题名称将主题下载至 themes 文件夹下

4.1.2 配置主题

打开博客根目录下的 _config.yml 文件，在里面找到 theme: landscape 改为theme: 你的主题名
然后执行 hexo clean 先删除旧的 html 文件，再执行 hexo g 重新生成，再执行 hexo d 推送到远程仓库

4.1.3 配置主题信息

您可以在 themes/主题名文件夹中查看该主题的内容，并可编辑该文件夹中的 _config.yml 文件修改主题样式
注意: 记得编辑根目录下的 _config.yml 文件，将信息修改为自己的

4.2 配置主题

准备工作：在主题文件夹中将_config.yml备份一份，复制出来一份作为使用(方便还原)

4.2.1 配置主页背景

在主题的_config.yml文件找到index_img: /img/background.jpg 后面是你的图片路径(可以本地，可以远程)

4.2.2 配置主页字体

在主题文件夹里的 source\css\ 文件夹里新建一个 custom.css 文件，命名随意
在主题文件夹里的 source\font\ 文件夹放置自己下载的字体
在custom.css放入如下内容：

 @font-face {  
     font-family: 'arzhu';  
     src: url('../font/DancingScript-Bold.ttf') format("truetype");  
     /* 修改成你的字体路径 */  
     font-display: swap  
 }  
 h1#site-title {  
     font-family:arzhu!important  
 }  
 span#subtitle {  
     font-family:arzhu!important  
 }  
 a#site-name {  
     font-family:arzhu!important  
 }  
 /*注(arzhu 只是别名，可以任意修改，不过引用的时候，要确保名字相同)*/  
 /*回到主题的_config.yml文件找到并替换为:*/  
 inject:  
     head:  
         - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

4.2.3 全局背景透明渐变

 /*添加如下内容到刚刚的custom.css文件*/  
 #recent-posts>.recent-post-item,.layout_page>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post {  
     background: var(--light_bg_color)  
 }  
   
 #aside-content .card-widget {  
     background: var(--light_bg_color)  
 }  
   
 #web_bg {  
     background: linear-gradient(90deg,rgba(247,149,51,.1),rgba(243,112,85,.1) 15%,rgba(239,78,123,.1) 30%,rgba(161,102,171,.1) 44%,rgba(80,115,184,.1) 58%,rgba(16,152,173,.1) 72%,rgba(7,179,155,.1) 86%,rgba(109,186,130,.1))  
 }

4.2.4 页脚透明渐变

 /*依然添加内容到custom.css*/  
 #footer {  
     background: rgba(255,255,255,.15);  
     color: #000;  
     border-top-right-radius: 20px;  
     border-top-left-radius: 20px;  
     backdrop-filter: saturate(100%) blur(5px)  
 }  
   
 #footer::before {  
     background: rgba(255,255,255,.15)  
 }  
   
 #footer #footer-wrap {  
     color: var(--font-color)  
 }  
   
 #footer #footer-wrap a {  
     color: var(--font-color)  
 }