Hexo博客搭建

Hexo博客配置

博客使用 cactus主题.

首次使用hexo

1. 安装node.js

windows下.
node.js链接 https://nodejs.org/en/

node.js安装会给系统安装一个npm的包管理器，这是hexo搭建博客所需要的；

linux下.
下载源码包，然后解压到任意文件夹

sudo cp node-v12.16.2-linux-x64 /opt/
cd /opt/node-v12.16.2-linux-x64/bin/
sudo ln -s node /usr/bin/node
sudo ln -s npm /usr/bin/npm
node -v
npm -v

执行上面的代码进行软连接.
打开终端获取管理员权限.
windows使用管理员身份运行命令提示符窗口.
liunx or mac则使用sudo su获得管理员权限.
查看node版本.

node -v

查看npm版本

npm -v

返回版本号则安装成功.
2. 安装git.
安装完成后可以在系统上找到 Git Bash Here.
3. 安装hexo.

npm install -g hexo
hexo -v

返回版本号则安装成功.
上面的安装步骤可能会需要重启电脑后才生效.

Hexo安装

• 使用npm安装cnpm来提高构建博客框架时下载文件的速度的

  npm install -g cnpm --registry=https://registry.npm.taobao.org

  linux
  在linux执行完上一步骤后可能使用cnpm会返回

  Command 'cnpm' not found, did you mean: command 'npm' from deb npm (6.14.4+ds-1ubuntu2) command 'cypm' from deb pakcs (2.2.0-1) command 'cpm' from deb cpm (0.32-1.2build2) command 'cxpm' from deb xpmutils (1:3.5.12-1) Try: sudo apt install <deb name>

  是因为这样安装他的软链接不会指向/usr/bin/目录，你需要返回查看cnpm安装时返回的代码如下

  /opt/node-v12.16.2-linux-x64/bin/cnpm -> /opt/node-v12.16.2-linux-x64/lib/node_modules/cnpm/bin/cnpm + cnpm@6.1.1 added 685 packages from 953 contributors in 14.043s

  然后手动创建软连接,之后再执行cnpm就可以使用了

  sudo ln -s /opt/node-v12.16.2-linux-x64/bin/cnpm /usr/bin/cnpm

• 使用cnpm安装hexo

  cnpm install -g hexo

  按照上面的方法手动创建软连接

  sudo ln -s /opt/node-v12.16.2-linux-x64/bin/hexo /usr/bin/hexo

初始化Hexo并配置仓库地址

• pwd 返回当前终端所在系统位置
• mkdir ‘文件夹名’ 创建一个博客文件目录，后续的配置都在这个目录内进行
• hexo init 初始化博客框架
  初始化hexo.

  mkdir blog cd blog hexo init

  初始化报错,可能由于网络延迟导致,配置国内源taobao.

  npm install -g cnpm --registry=https://registry.npm.taobao.org

  初始化成功后查看文件列表如下.

  ls -l #total 261 #-rw-r--r-- 1 Administrator 197121 2465 2月 10 01:49 _config.yml #-rw-r--r-- 1 Administrator 197121 71577 2月 10 01:49 db.json #drwxr-xr-x 1 Administrator 197121 0 2月 10 01:13 node_modules/ #-rw-r--r-- 1 Administrator 197121 581 2月 10 01:35 package.json #-rw-r--r-- 1 Administrator 197121 133002 2月 10 01:13 package-lock.json #drwxr-xr-x 1 Administrator 197121 0 2月 10 01:49 public/ #drwxr-xr-x 1 Administrator 197121 0 2月 10 01:02 scaffolds/ #drwxr-xr-x 1 Administrator 197121 0 2月 10 01:02 source/ #drwxr-xr-x 1 Administrator 197121 0 2月 10 01:46 themes/ ## 可以列出当前目录下的hexo创建的所有文件windows使用dir来查看

  在_config.yml中添加以下代码,配置github远程仓库地址.

  deploy: - type: 'git' repo: 'https://github.com/pandaefx/pandaefx.github.io.git' # 部署仓库地址 branch: 'master' # 分支名master main

hexo start
#INFO  Start processing
#INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
## 本地运行博客网页可使用hexo s

hexo n "博客文章名"
#INFO Created:"文章路径" 
## 创建一篇新的博客文章

hexo clean 
## 删除静态博客

hexo generate 
## 生成静态博客 hexo g

Hexo博客本地预览

生成本地预览网页

hexo clean REM 清除页面历史

hexo generate REM 生成本地预览文件

hexo server REM 启动本地预览服务 默认为 http://localhost:4000/

预览完毕按Ctrl+C退出预览,再执行一次hexo clean,确保文件目录保持干净.

hexo clean

安装hexo-deployer-git

在博客根目录下使用以下命令安装git

cnpm install --save hexo-deployer-git

git 用户配置

# git config --global user.name "用户名"
# git config --global user.email "邮箱"
git config --global user.name luomit
git config --global user.email 1107199736@qq.com
## 注意，如果需要在部署时同时部署到不同的站点，则这些站点的用户名和注册邮箱需要一致

配置ssh密钥

• 检查ssh密钥是否存在
  cd 到系统根目录，使用ls -l 列出所有文件，如果有.ssh文件夹存在，则打开.pud结尾的文件将密钥复制到远端站点的用户设置内!
• 生成SSH密钥

  ssh-keygen -t rsa -C "your_email@example.com" ## 使用以上代码会生成一个.ssh的文件夹在系统根目录内，.ssh文件夹内就有id_rsa和id_rsa.pub两个文件，分别表示生成的私钥和公钥 ## 公钥一定要妥善保管，切勿泄露他人，以免心怀不轨的人偷走你的'小姐姐'or'小哥哥'

部署到远端仓库

$ hexo clean 
## 删除静态博客
$ hexo generate 
## 生成静态博客
$ hexo deploy
## 部署
$ hexo backup
## 备份
$ hexo clean && hexo generate && hexo backup && hexo deploy
## 也可以一次执行全部命令

主题替换

Hexo主题官网

git clone https://github.com/JoeyBling/hexo-theme-yilia-plus.git /themes/yilia
## git clone "主题仓库路径" "目标路径"

博客源文件更新与同步

源文件仓库地址https://github.com/pandaefx/hexo-site.git
首次或本地没有源文件仓库时,先获取github远程源文件仓库.

git clone https://github.com/pandaefx/hexo-site.git

首次使用git时要配置用户名和用户邮箱

git config --global user.name "username" REM 配置用户名
git config --global user.email user@email.com REM 配置用户邮箱
git config --global credential.helper store REM 保存账号密码可避免每次输入
git config --global --list REM 查看配置信息

修改或添加文章

….

更新源文件到仓库

如果有执行过hexo部署的先清除本地缓存

hexo clean

提交修改并推送至

git status REM 查看仓库状态
git commit -m "commit_message" REM 提交
git push origin main REM 推送到 hexo-site 仓库

hexo常用插件

hexo-generator-search 本地搜索

npm install hexo-generator-search --save

hexo-generator-feed rss订阅

npm install hexo-generator-feed --save

hexo-deployer-git 博客推送/发布

npm install hexo-deployer-git --save

首页显示工程列表

在根目录下source文件夹内创建_data/projects.json(不是theme/castus/source/)

[
   {
      "name":"Blog Source Code",
      "url":"https://github.com/pandaefx/hexo-blog-source",
      "desc":"blog source code hosted on github."
   },
   {
      "name":"Font Awesome",
      "url":"http://fontawesome.io/",
      "desc":"The iconic font and CSS toolkit"
   }
]

标题样式修改

将文章##号改为H2;在/theme/cactus/source/css/_partial/article.styl

.content
  h2:before
    position: absolute
    top: -4px
    left: -1rem
    color: $color-accent-1
    content: "H2" # 改这 
    font-weight: lighter # 调节粗细 lighter < normal < bold < bolder
    font-size: 0.6rem # 调节字体大小 

将文章目录标题##号改为H2;在/themes/cactus/source/css/_partial/post/actions_desktop.styl

&:before
  color: $color-accent-1
  content: "H2" 
  font-weight: lighter
  font-size: 0.5rem

博文相关

在博文中添加图标

在文章任意位置添加以下代码

<head> 
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script> 
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/v4-shims.js"></script> 
</head> 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">

就可以从 https://fontawesome.com/icons/

<i class="fa-solid fa-font-awesome"></i>

修改博客签名字体

1. 下载字体文件(Time-Machino.ttf)存放到/theme/cactus/source/lib/下.
2. 在/theme/cactus/source/css/下新建名字为_myfonts.styl的文件内容如下.

   @font-face font-style: normal font-family "Machino"; src: local("Time Machino"), url("../lib/Time-Machino.ttf") format("truetype")

3. 打开在/theme/cactus/source/css/下的style.styl,在开头加入@import "_myfonts"引入字体.
4. 打开在/theme/cactus/source/css/下的style.styl,在末尾对要修改的标签进行操作,如下.

   h1{ font-family: Machino; }

添加友链页

新建friend的页面文件.

hexo new page friend

打开根目录/source/friend/index.md

---
title: 友链
date: 2024-05-13 20:54:03
type: "friend"
---
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>friend link</title>
    <link rel="stylesheet" type="text/css" href="./friend.css">
  </head>
  <body>
    <div id="friend-box">
        <div class="box">
            <img class="avatar" src="头像链接" alt="avatar">
            <div class="user">
                <a href="主页地址" class="name">用户昵称</a>
                <p class="introduction">主页简介</p>
            </div>
        </div>
    </div>
  </body>
</html>

之后只要按照格式插入<body></body>中并修改对应参数即可.

<div id="friend-box">
    <div class="box">
        <img class="avatar" src="头像链接" alt="avatar">
        <div class="user">
            <a href="主页地址" class="name">用户昵称</a>
            <p class="introduction">主页简介</p>
        </div>
    </div>
</div>

在根目录/source/friend/下新建friend.css

:root{
    --height: 10vh;
    --width: 100%;
    --avatar-height: calc( var(--height) * 0.9 );
}
#friend-box{
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1vmin 1vmin;
    margin: 2vh;   
    z-index: 0;
}
.box{
    display: flex;          /* 弹性布局*/
    flex-direction: row;    /* 左右排列*/
    position: relative;
    height: var(--height);
    border-radius: calc( var(--height) *.1 ); 
    z-index: 0;
    scale: .9;
    transition: all 0.1s;
}
.box:hover{
    background-color: #5e5e5e4f;
    z-index: -2;
    scale: 1.1;
}
.avatar{
    position: relative;
    border-radius: var(--height);
    height: var(--avatar-height);
    width: var(--avatar-height);
    margin-left: calc( var(--height) * 0.05 );
    margin-top: calc( var(--height) * 0.05 );
    transition: all 0.5s;
    filter: grayscale(1) blur(0.5px);
    scale: .8;
}
.avatar:hover{
    /* transform: rotate(360deg); */
    filter: grayscale(0) blur(0px);
    scale: 1;
}
.user{
    position: relative;
    display: flex;          /* flex弹性布局*/
    flex-direction: column; /* 上下排列 */
    margin: 1vmin;
    width: calc( var(--width) - var(--height) * 1.05 );
}
.name{
    margin: 0px;
    font-size: calc( var(--height) * 0.25 );
    transition: all 0.2s;
    line-height: calc( var(--height) * 0.25 );
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
/* .name:hover{none
} */
.introduction{
    margin: 5px;
    font-size: calc( var(--height) * 0.125 );
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
#friend-box a{
    text-decoration-line: underline;
    text-decoration-thickness: 0.5px;
    background-image: none;
}
#friend-box a:hover{
    font-weight: bolder;
    color: #2bbc8a;
    /* background-image: none; */
    text-decoration-line: none;
    text-shadow: 2px 2px 2px #2bbc89b9;
}

根目录/source/friend/index.md中的link的css引用一定要仔细检查,对应上friend.css文件的位置.

配置博客到云服务器

先看[[202405182153|Nginx]]的配置.
BlackFile哔哩哔哩Up主
centeros8.0
华为云

安装shell并联机

1. 下载xshell,并安装xshell.
2. 购买云服务器,会获得主机113.**.***.158和用户名root并且一定要记得先重置以下主机的密码.
3. 打开xshell,文件->新建->输入主机113.**.***.158,设置名称.
   
4. 点击用户身份验证->输入用户名->密码(重置的主机密码)->确定->在左边栏右键主机->属性->链接(成功进入).
   

安装git

系统为centos7.

sudo yum install -y git

源码安装↓.

sudo yum install -y wget
sudo yum install -y gcc-c++
sudo yum install -y zlib-devel perl-ExtUtils-MakeMaker

可以先去git官网看看最新的版本号然后替换版本号↓.

wget https://mirrors.edge.kernel.org/pub/software/scm/git/git-2.9.0.tar.gz

下载好后就是解压安装↓

tar -zxvf git-2.9.0.tar.gz REM 解压git
cd git-2.9.0  REM 移动到git文件夹下
./configure --prefix=/usr/local  REM 指定安装路径
make 
sudo make install

配置git在主机的PATH环境变量.

which git REM 查看git的安装位置
echo 'export PATH=$PATH:/usr/local/git/bin' >> /etc/bashrc REM 设置变量
source /etc/bashrc REM 使配置生效
git --version REM 返回版本号则git安装成功

创建主机用户和密码并配置SSH密码

用户密码.
zxcv
用户名.
abc
创建用户并设置用户密码.

adduser cat REM cat为用户名
passwd cat

为用户分配权限.

usermod cat -G wheel

本地创建ssh密钥(在本地的电脑上打开终端执行,不是xshell的服务器上⚠️)

ssh-keygen -t rsa

一直按回车就完事了,最后会提示/c/Users/panda/.ssh/id_rsa.pub密钥路径.
打开C:\Users\panda\.ssh文件夹,将id_rsa.pub内容复制备用.

回到xshell远程主机终端上.

su - cat

这是终端内的用户从root@机器名->cat@机器名说明用户切换成功.

vim .ssh/authorized_keys REM 新建并编辑authorized_keys文件

如果提示没有vim则可以换nano等其他文本编辑器或者安装vim↓.

sudo yum install -y vim

最后将id_rsa.pub的内容粘贴到authorized_keys上(vim保存退出’:wq’).

cat .ssh/authorized_keys

打印出密钥则粘贴成功了.

配置用户密钥.ssh权限

移动到用户cat目录下修改.ssh的文件权限权重如下↓.

cd /home/cat/
chmod 700 .ssh

git仓库配置

exit REM 提出用户进入root管理员,确保在root用户下再执行下面的操作↓.

mkdir /home/git/ REM 创建git目录
chown -R cat:cat /home/git/ REM 用户所有权权限
chmod -R 755 /home/git/ REM git文件夹权限

进入git目录,初始化一个git仓库,并设置仓库的权限.

cd /home/git/
git init --bare blog.git
chown cat:cat -R blog.git

新建钩子文件post-receive.

vim /home/git/blog.git/hooks/post-receive

将以下↓两句粘贴到/home/git/blog.git/hooks/post-receive文件中,:wq保存并退出.

#!/bin/bash
git --work-tree=/home/blog --git-dir=/home/git/blog.git checkout -f

使用cat /home/git/blog.git/hooks/post-receive打印看看没有吗保存成功.

chmod +x /home/git/blog.git/hooks/post-receive REM 修该文件夹权限

配置nginx

创建blog目录用户nginx转发.

mkdir /home/blog/
chown -R cat:cat /home/blog/
chmod -R 755 /home/blog/

安装nginx.

yum install -y nginx

启动nginx.

systemctl start nginx.service

查看Nginx服务状态.

systemctl status nginx.service

如下图所示即安装成功👌.

配置nginx转发

查看nginx的默认配置文件的安装位置.

nginx -t

configuration file /etc/nginx/nginx.conf test is successful
使用vim或其他文本编辑器打开/etc/nginx/nginx.conf

vim /etc/nginx/nginx.conf

修改以下有文字说明的内容↓.

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    root /home/blog;    # 修改为创建的blog目录地址
    server_name www.example.com; # 需要修改为你的域名（或者公网ip）
    
    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;
    location / {
    }
    error_page 404 /404.html;
        location = /40x.html {
    }

分别是root后面和server_name后面,改完:wq保存退出.
重启Nginx服务.

systemctl restart nginx.service

配置本地blog文件并发布到云服务器

修改_config.yaml

deploy:
  type: git
  repo: cat@113.**.***.158:/home/git/blog.git
  branch: master