这是第一篇文章，写下我的建站经历，希望能留下怎么。

首先开个头吧，当看到哪些大佬们的漂亮博客后，自己想搭一个博客的想法就越来越强了，但是搭的时候还是不断碰壁，目前大三虽然有点编程基础但是服务器一类配置加上markdowm和hexo的yaml文件的语法懂得也少，花了几天才实现了初页面最简单的框架，引入了themes主题（图片路径卡了好久^>_<^）,不过看着还是挺好的吧，对初建来说（骄傲）。

开始搭建

配置工具

首先安装node.js和git，这去官网安装就行了。

我贴两个链接:git官方window下载的https://git-scm.com/download/win
　　　　　　:node.js官网的https://nodejs.org/zh-cn/download/prebuilt-installer

　　　　　　git -v 和 node -v 检查是否安装成功

hexo初始化

安装 hexo脚手架

npm install -g hexo-cli

初始化hexo项目
hexo init <文件夹名>
cd <文件夹名>
npm install

可以执行下面命令,build静态文件，部署，和启动服务
hexo generate
hexo deploy
hexo server

主题下载

默认是landscape主题可以改喜欢的主题，这里用的是butterfly主题。
butterfly的GitHub仓库地址: https://github.com/jerryc127/hexo-theme-butterfly
可以用git命令在初始化的hexo根目录下克隆主题

或者npm下载

npm i hexo-theme-butterfly --save

可以顺便安装一个hexo插件hexo-deployer-git,部署到云服务器需要用到
npm install hexo-deployer-git --save

配置根目录下的_config.yml文件，找到theme landspace改成butterfly，可以同时配置deploy如下图（注意!:deploy配置可以先不配我这里是在云服务器上创建了git仓库还配置了ssh密钥,使得deploy可以直接推送到云服务器的git仓库）

deploy配置

可以重新生成静态文件，部署，启动服务 (第一个是 generate deploy的简写, 也可以 hexo g -w 监听文件变化 写文件就不需要重新generate了)

hexo g -d
hexo server

如图所示，部署成功，可以crtl+鼠标左键打开浏览器查看效果。

部署成功界面

这里什么都没有喔


(至此，hexo博客就搭建完成了，发挥你的想象吧少年。(●’◡’●) 假的才刚刚开始)

先讲hexo如何写文章和图片设置。（目前也学的少，有后续会补充的）

hexo教程https://butterfly.js.org/posts/4aa8abbe（不止一个链接有很多，可以去主页自己看看）

配置themes主题

tip: 可以在butterfly文件夹下复制_config.yml文件到根目录下，命名为_config.butterfly.yml，这样可以不用去修改主题的_config.yml文件，只需要修改_config.butterfly.yml文件即可。(因为根目录下的优先级更高，而且根目录下两个_config.yml文件会相互覆盖,所以不会有bug。 只是方便修改，可以不配置，修改主题的_config.yml文件也可以达到相同的效果。)

具体配置

参考:Butterfly 安裝文檔(二) 主題頁面https://butterfly.js.org/posts/dc584b87/
参考:hexomarkdown语法https://hexo.dreamerhe.cn/posts/45290/

新建导航页面

hexo new page <页面名称>

下面是我的目录结构 (补充: Home目录名，about目录名和link目录名应该时小写字母开头)

这三个是特殊页面:
归档页面（archives）是内建的，不需要创建
标签页面（tags）在创建后，需要在表头加上type: “tags”,而内容留空：
categories页面同理，创建后加上type: “categories”
其他是普通页面:
可以自定义front-matter 比如 top_img: 图片路径 可以设置顶部图

ps:我的_config.butterfly.yml文件配置顶部图不生效(可能是文件名或者图片路径问题)tags和categories的显示顶部图是再front-matter配置top_img设置的,就暂时不管了。

{页面名称}: {路径} || fas fa-{图标名称}
{二级菜单名称}||fas fa-{图标名称}:
  {二级页面名称}: {路径} || fas fa-{图标名称}

图标目前我使用默认的，可以自定义不过还没做，以后补充。

导航目录结构

设置导航栏目录的，在_config.butterfly.yml文件中配置menu:

# Menu 目錄
  #首页
  #时间轴
  #标签
  #分类
  #清单 :music :movie :Gallery
  #友链
  #关于
menu:
  Home: / || fas fa-home
  Archives: /archives/ || fas fa-archive
  Tags: /tags/ || fas fa-tags
  Categories: /categories/ || fas fa-folder-open
  # List||fas fa-list||hide:
  #   Music: /music/ || fas fa-music
  #   Movie: /movies/ || fas fa-video
  Link: /link/ || fas fa-link
  About: /about/ || fas fa-heart


# Code Blocks (代碼相關)
# --------------------------------------
#代码高亮主题
#主題支持代碼複製功能
#展示代码语言
#代码框是否展开 true 全部代碼框不展開，需點擊>打開 。false 代碼框展開，有>點擊按鈕 。none 不顯示>按鈕
#代碼框高度限制，默認為false，不限制高度。
#代碼框是否換行，默認為false，不換行。

highlight_theme: light #  darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # copy button
highlight_lang: true # show the code language
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
highlight_height_limit: 200 # unit: px
code_word_wrap: false # true: wrap the code block / false: not wrap the code block



搜索框需要安装插件,且_butterfly,yml文件中local_search: enable:true （注意空格yaml格式）

npm install hexo-generator-search --save

在_config.yml配置搜索插件

#serch config https://github.com/wzpan/hexo-generator-search
search:
  path: search.xml
  field: post
  content: true
  # template: search.xml

图片设置

_config.butterfly.yml文件中配置
注释很清晰，这里就不多说了。
我就设置了index_img,tag_img,category_img,
cover的default_cover，可以设置一张默认的封面。
配置可以都为true，
(在每一篇文章md中front-matter中也可以设置封面cover: /img/xxx.jpg)

# Image (圖片設置)
# --------------------------------------

# Favicon（網站圖標）
favicon: /img/favicon.png

# Avatar (頭像)
avatar:
  img: /img/avatar.png
  effect: false

# Disable all banner image
disable_top_img: false

# The banner image of home page
index_img: /img/1313942.png

# If the banner of page not setting, it will show the top_img
default_top_img: 

# The banner image of archive page
archive_img:

# If the banner of tag page not setting, it will show the top_img
# note: tag page, not tags page (子標籤頁面的 top_img)
tag_img: /img/819506.png

# The banner image of tag page
# format:
#  - tag name: xxxxx
tag_per_img: 

# If the banner of category page not setting, it will show the top_img
# note: category page, not categories page (子分類頁面的 top_img)
category_img: /img/942765.jpg

# The banner image of category page
# format:
#  - category name: xxxxx
category_per_img:

cover:
  # display the cover or not (是否顯示文章封面)
  index_enable: true
  aside_enable: true
  archives_enable: true
  # the position of cover in home page (封面顯示的位置)
  # left/right/both
  position: both
  # When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
  default_cover:
      # - /img/1313942.png
    # - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

官方美化

在_config.butterfly.yml文件中配置#Background effects (背景特效)内容
目前没配置。

自定义美化

(画饼)

补充永久链接插件

npm install hexo-abbrlink --save

安装完成后在_config.yml文件中配置 permalink: posts/:abbrlink
这样就不会用日期时间来作为文章的永久链接了，而是用文章标题的缩写来作为链接。
文章标题如果是中文会很长，影响seo(大概?不过对博客作用不大，毕竟没流量)

#永久链接格式
# permalink: :year/:month/:day/:title/
permalink_defaults: zh-CN
permalink: posts/:abbrlink
pretty_urls: 
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

在_config.yml文件中配置

#abblink config https://github.com/ohroy/hexo-abbrlink
abbrlink:
  alg: crc32 #crc16 or crc32
  rep: hex #dec or hex

aplayer音乐播放器

1.首先安装hexo-tag-aplayer插件

npm install hexo-tag-aplayer --save

2.在_config.butterfly.yml文件中找到buttom注入内容，添加aplayer播放器代码
第三步要先做(sorry)
no-destroy 切换页面歌曲不会销毁
data-id: 歌单ID(必填) 可以通过网页版的网易云音乐播放器的网易云音乐歌单链接后面的数字，比如https://music.163.com/#/playlist?id=9757523246
9757523246就是歌单ID (可以用自己的歌单)
data-server: 歌单来源(必填) netease(网易云音乐)或其他音乐平台看参数
data-type: 歌单类型(必填) playlist(歌单)或song(单曲)
其他可选
(这是全局吸底播放器)

示例：

inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    # - <script src="xxxx"></script>
    - <div class="aplayer no-destroy" data-id="9757523246" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="false"> </div>

3.pjax配置 enable:true ，配置Aplayer和Meting的注入
# Pjax
# It may contain bugs and unstable, give feedback when you find the bugs.
# https://github.com/MoOx/pjax
pjax:
  enable: true
  exclude:
    # - xxxx
    # - xxxx

# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

4.可以在md页面中使用(可选) front-matter中设置 aplayer:true
这只是单页面有效切换页面会销毁，而且和全局不是同步的
---
title: music
date: 2024-08-14 20:54:17
layout: "music"
top_img: https://47.66.95.125/img/1313942.png
abbrlink:
aplayer: true
---

{% meting "9757523246" "netease" "playlist" %}

示例:

评论功能

使用的是Valine

comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  use: Valine
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: true
  count: true # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page


valine butterfly.yaml文件配置
需要在leanCloud注册账号 https://console.leancloud.app/apps 最好用国际版

# valine
# https://valine.js.org
valine:
  appId: 'appid' # leancloud application app id
  appKey: 'appkey' # leancloud application app key
  avatar: 'monsterid' # gravatar style https://valine.js.org/#/avatar
  serverURLs: https://valine.bumiangu.xyz # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: # valine background
  visitor: true
  option:
    placeholder: 说点什么吧... # Comment box placeholder
    requiredFields: [nick, mail] # Required fields: nick, mail, link

live2d模型导入

用的是live2d-widget
https://github.com/stevenjoezhang/live2d-widget

可以简单在butterfly配置文件中注入

bottom:
 - <script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

我是用放服务器上了，但是请求的资源还是cdn的

补充

目前的效果(还没买服务器和域名，现在试用云服务器，过3个月一起买了)

云服务器部署

参照咕咕鸽的教程https://blog.laoda.de/archives/hexo-building#61-git%E9%85%8D%E7%BD%AE

安装git,中途输入y确认

yum install git

1.创建git用户
adduser git

添加git账户权限 (4 表示读权限（r）, 2 表示写权限（w）,1 表示执行权限（x）示例:4+2+1=7 (读写执行权限) —-(u,g,o分别表示user,group,others ,740表示(用户有读写执行权限，组有读权限，其他人没有权限)))
chmod 740 /etc/sudoers
vim /etc/sudoers

找到下面代码
## Allow root to run any commands anywhere
root    ALL=(ALL)     ALL

添加 git ALL=(ALL) ALL
git     ALL=(ALL)     ALL

更改回权限
chmod 400 /etc/sudoers

2.设置git账户密码 (输入两次一样的密码)
sudo passwd git

3.切换到git账户，创建~/.ssh文件夹，创建authorized_keys文件并编辑，将windows电脑用户文件夹下的.ssh/id_rsa.pub文件内容复制到authorized_keys文件中(如果没有需要重新生成ssh密钥对)

su git
mkdir ~/.ssh

vim ~/.ssh/authorized_keys

改回权限

chmod 600 /home/git/.ssh/authorized_keys
chmod 700 /home/git/.ssh

windows电脑下打开gitbash，输入以下命令，能进入服务器就算是成功了
ssh -v git@SERVER

4.创建hexo项目文件夹，切换到root账户，克隆项目到服务器

sudo su root

我的目录结构

执行下面命令
(chown 更改文件或者目录的所有者和组(git:git git和git组) ，chmod 更改文件或者目录的权限 -R 表示递归选择,表示对指定目录及其所有子目录和文件进行操作。)

chown -R git:git /blog/repo
chmod -R 755 /blog/repo
mkdir /blog/hexo
chown -R git:git /blog/hexo
chmod -R 755 /blog/hexo

在repo目录下创建新的git仓库 cd /blog/repo

git init --bare hexo.git

5.创建git钩子脚本，使推送时自动化部署

vim /blog/repo/hexo.git/hooks/post-receive

进入编辑模式复制以下内容(用于将 Git 仓库的内容检出到指定的工作树目录)
#!/bin/bash
git --work-tree=/blog/hexo --git-dir=/blog/repo/hexo.git checkout -f

权限设置(+x 赋予文件可执行权限)
chown -R git:git /blog/repo/hexo.git/hooks/post-receive
chmod +x /blog/repo/hexo.git/hooks/post-receive

6.安装宝塔面板 (我是在pagoda目录下执行的命令。 记得截图防止忘记账户密码，网站链接也可收藏一下)
yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_6.0.sh && bash install.sh


需要放行端口 (我这是阿里云的29152端口，具体开宝塔需求的端口)

7.配置宝塔面板
新建站点和安装nginx服务器

配置文件 (只需要改server_name和root目录) 重启nginx服务

最后_config.yml文件中配置deploy配置(公网ip改自己的，或者域名)

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@121.199.22.47:/blog/repo/hexo.git
  branch: master