博客环境搭建

博客环境搭建

1. 修改配置文件：（不要用windows的记事本），推荐使用Sublime Text3、NodePad++但是官方有污蔑国家的公告，新疆、香港。
2. 下载Git：Git
3. 下载Node.js：Node.js
4. 查看环境安装是否成功：node -v 出现版本号，npm -v 出现版本号，git --version 出现版本号
5. 如果node -v 报错的话，那么将Node.js的安装路径加到环境变量中。
6. 设置npm的镜像源：查看npm的配置

#查看npm的配置
npm config list
#默认源
npm config set registry https://registry.npmjs.org
#临时改变镜像源
npm --registry=https://registry.npm.taobao.org
#永久设置为淘宝镜像源
npm config set registry https://registry.npm.taobao.org
#另一种方式，编辑 ~/.npmrc 加入下面内容
registry = https://registry.npm.taobao.org

本地安装hexo静态博客框架

hexo框架安装初始化

新建一个文件夹，比如BolgTest的文件夹，创建完后，先不要点进去，在此处点击鼠标右键，选择Git Bash Here，然后依次输入如下命令：

# hexo框架的安装
npm install -g hexo-cli
# 等上一个命令完成后，在输入下面的命令
hexo init <新建文件夹的名称>  #初始化文件夹
cd <新建文件夹的名称>
npm install  # 安装博客所需要的依赖文件  

生成运行

#生成Hexo页面
hexo g
#启动服务
hexo s

浏览器中打开http://localhost:4000或者127.0.0.1:4000，可以看到一个网页，说明Hexo博客已经成功在本地运行。

主题选择个性化修改

选择主题：在github上找套自己喜欢的主题，下在完解压到<blog安装路径>/themes/下。

站点配置修改在<blog安装路径>/_config.yml，主题配置文件在<blog安装路径>/themes/<>

本博客采用 butterfly 主题

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
#或者
git clone -b master https://gitee.com/iamjerryw/hexo-theme-butterfly.git themes/butterfly

应用站点

修改站点配置文件_config.yml，把主题改为 butterfly
theme: butterfly

个性化修改前安装插件

个性化修改前安装插件
安装 pug 以及 stylus 渲染器插件
npm install hexo-renderer-pug hexo-renderer-stylus --save
安装将要用到的插件插件
注脚插件（可选）： hexo-reference，reference 插件说明。
部署插件 (必要)： hexo-deployer-git
npm install hexo-wordcount hexo-wordcount hexo-generator-search hexo-reference hexo-deployer-git --save

美化参考

Xpand的hexo主题配置

感谢以下博客提供的学习参考
Butterfly 安裝文檔(一) 快速開始
Butterfly 安裝文檔(二) 主題頁面
Butterfly 安装文档(三) 主题配置
Butterfly 安装文档(四) 主题配置
Butterfly 主题更新总结
Hexo博客之butterfly主题优雅魔改系列
Hexo 大结局

推送到GitHub

注册GitHub账号

1. 注册GitHub账号
2. 新建仓库，仓库名为你的用户名.github.io

git配置

1. 配置个人信息

git config --global user.name "XXXX"
git config --global user.email "XXXXXXXXX@XXX.com"

2. 生成密钥,一路回车

ssh-keygen -t rsa -C "XXXXXXXXX@XXX.com"

3. 复制公钥id_rsa.pub
4. 在GitHub中添加ssh key https://github.com/settings/keys
5. 修改 hexo 根目录下的文件_config.yml 中的 deploy，添加仓库地址

deploy:
  type: git
  repo:
      github: git@github.com:xiaopengand/xiaopengand.github.io.git
      gitee: git@gitee.com:xpand/xpand.git #我这是双部署
  branch: master

6. 生成并上传仓库

hexo g -d

7. 如果没有 hexo-deployer-git，安装
   npm install hexo-deployer-git --save

域名解析

暂时不写了

域名解析成功，但显示404

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tEFf7Okw-1654157727718)(https://fastly.jsdelivr.net/gh/xiaopengand/img@latest/2020/12/22/9535cadc3817d753f331130550d5b2bc.png)]
在博客目录下/soure/文件下创建一个CNAME的文件，文件内容填你的域名地址
例如我的：

www.qwas.top
qwas.top