Hexo个人博客搭建历程

环境配置

1、hexo:提供博客框架,高效。
2、Node.js: 环境所需;Chrome上的JavaScript运行引擎,我们会用到 bode.js下的包管理器npm。
3、Git: 环境所需;免费、开源的分布式版本控制系统。
4、GitHub: 提供免费服务器,还有代码托管等功能。

Github的创建和配置

官网:https://github.com/

1.注册账号
在这里插入图片描述

2.新建仓库
新建一个储存仓库,username为github用户名

username.github.io

在主页右上角,点击加号,找到New repository,点进去会显示如下界面,输入仓库名,点击创建

Repository name格式推荐写成username.github.io,点击Create repository
在这里插入图片描述

安装Git

下载地址:https://git-scm.com/

一路next,打开cmd命令行,成功页面如下
在这里插入图片描述

打开Git-Bash工具 ,初始化Git

1.配置用户名
git config --global user.name "用户名"
#用户名可以不是Github用户名,为了方便,设置一致。
2.配置邮箱
git config --global user.email "邮箱地址"
3.查看已配置的用户信息
git config --global list

安装Node.js

下载地址:https://nodejs.org/en/
在这里插入图片描述

打开cmd,进入文件目录,安装成功如下
在这里插入图片描述
为了加快速度,npm换源

C:\Program Files\nodejs>npm config set registry https://registry.npm.taobao.org

C:\Program Files\nodejs>npm config get registry
https://registry.npm.taobao.org/

安装Hexo

本地安装hexo前,应该先创建一个新文件夹blog

$ cd f:/hexo

$ npm install hexo-cli -g

$ hexo init blog

$ cd blog

$ npm install

$ hexo g # 或者hexo generate

$ hexo s # 或者hexo server,可以在http://localhost:4000/ 查看

hexo命令

hexo generate (hexo g) 生成静态文件,会在当前目录下生成一个新的叫做public的文件夹

hexo server (hexo s) 启动本地web服务,用于博客的预览

hexo deploy (hexo d) 部署播客到远端(比如github, heroku等平台)

$hexo new "postName" #新建文章
$ hexo new page "pageName" #新建页面
$ hexo d -g #生成部署
$ hexo s -g #生成预览

本地hexo配置情况

C:\Users\admin>hexo -v
hexo-cli: 4.2.0
os: Windows_NT 10.0.19041 win32 x64
node: 14.15.4
v8: 8.4.371.19-node.17
uv: 1.40.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.16.1
modules: 83
nghttp2: 1.41.0
napi: 7
llhttp: 2.1.3
openssl: 1.1.1i
cldr: 37.0
icu: 67.1
tz: 2020a
unicode: 13.0

Hexo主题设置

官方主题推荐:https://hexo.io/themes/

主题1:stun

安装

帮助文档
在Hexo 根目录下执行

$ hexo clean  
#该命令的作用是清除缓存,若不输入此命令,服务器有可能更新不了主题
$ git clone https://github.com/liuyib/hexo-theme-stun.git themes/stun

#安装依赖hexo-renderer-pug
$ npm install --save hexo-renderer-pug

使用

修改Hexo目录下的_config.yml配置文件中的theme属性,将默认的landscape改为为black-blue

101| theme: stun

然后,启动 Hexo 服务器:

$ hexo clean 
$ hexo s

更新

$ cd themes/stun
$ git pull

本地效果

访问:http://localhost:4000/
在这里插入图片描述

主题优化

安装依赖

$ npm install --save hexo-render-pug
$ npm install --save hexo-generator-search
$ npm install --save hexo-deployer-git  

1.增加页面导航

$ hexo new page categories
$ hexo new page tags

在项目目录/source/categories/index.md 加上

type: categories

在项目目录/source/tags/index.md 加上

type: tags

修改配置文件

#展示设置
title: {$自定义文字}
language: zh-CN 
url: {$博客地址}

#主题
theme: stun

#git相关
deploy:
  type: git
  repo: 
  	github: {$你的博客仓库}
  	gitee: {$你的博客仓库}
  branch: master

#搜索相关
search:
  path: search.json
  field: post
  content: true

2.修改部署文件夹下/themes/stun/_config.yml(挑选重要部分修改)

#取消导航栏注释(注意空格对齐)
menu:
  categories: /categories/ || fas fa-layer-group
  tags: /tags/ || fas fa-tags
  
#更改图标(最好使用链接地址,我这里使用的图床,图床使用见下一篇博客)
favicon:
  small: https://gitee.com/BothSavage/PicGo/raw/master/image/favicon-16x16.png
  medium: https://gitee.com/BothSavage/PicGo/raw/master/image/favicon-32x32.png

#更改背景大图
header:
  bg_image:
    enable: true
    url: https://gitee.com/BothSavage/PicGo/raw/master/image/背景.png

#更改头像大图,并设为圆形
author:
  avatar:
    url: https://gitee.com/BothSavage/PicGo/raw/master/image/头像.png
    rounded: true
    
#打开访问统计
busuanzi:
  enable: true
  
#打开搜索功能
local_search:
  enable: true

主题2:black-blue

安装

$ hexo clean
$ git clone https://github.com/maochunguang/black-blue.git themes/stun

#安装依赖
npm install --save hexo-renderer-jade hexo-renderer-stylus
npm install --save hexo-generator-feed hexo-generator-sitemap hexo-generator-archive hexo-browsersync

使用

修改 Hexo 根目录下的 _config.yml 文件:

101| theme: black-blue

保存然后执行命令

$ hexo clean 
$ hexo g # 生成
$ hexo s # 启动本地web服务器

更新主题

$ cd themes/black-blue
$ git pull

主题3:spfk

安装

$ hexo clean
$ git clone https://github.com/luuman/hexo-theme-spfk.git themes/stun

使用

修改 Hexo 根目录下的 _config.yml 文件:

101| theme: black-blue

保存然后执行命令

$ hexo clean 
$ hexo g # 生成
$ hexo s # 启动本地web服务器

主题优化

1.博客个人信息
修改Hexo文件夹根目录下的 _config.yml 文件

#站点标题
6| title: Atkx' blog
#作者
10| author: Atkx

2.头像设置
这里修改主题文件夹下的_config.yml 文件

# Link to your avatar |填写头像地址
16| avatar: img/atkx_32x32.png
# Small icon of Your site | 站点小图标地址
19| favicon: img/atkx_16x16.png

Hexo部署到github

配置github ssh

只有配置好 SSH 密钥后,我们才可以通过 git 操作实现本地代码库与 Github 代码库同步。

在你第一次新建的文件夹里面,点击 Git Bash Here 输入以下命令:

$ ssh-keygen -t rsa -C "你的邮箱"

生成一对密钥 SSH key,持续enter。

在路径C:\Users\admin\.ssh下找到id_rsa.pub,用记事本打开,复制里面的内容。

配置路径:github 网站–>Settings–>SSH and GPG keys–>NEW SSH KEY ,title随便填写,把上面复制的内容粘贴进Key里面,点击Add SSH key。

在这里插入图片描述
输入命令检验是否成功。

$ ssh -T git@github.com
Hi swhat! You've successfully authenticated, but GitHub does not provide shell access.

部署文件

用sublime打开blog下创建的用户名文件进行部署(将文件直接拖进去就可以了)打开仓库_config.yml 配置文件,

第16行,更改url

https://swhat.github.io

拉到文件末尾,填上如下配置:

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/swhat/swhat.github.io.git 
  #仓库名字改成自己的
  branch: master

若端口冲突,也可以在_config.yml中添加

server:
  port: 4001 #端口号随意,默认是4000
  compress: true
  header: true

进入目录,执行命令

$ hexo g -d

会报错

ERROR Deployer not found: git

安装依赖

 npm install --save hexo-deployer-git

重新执行hexo g -d,在弹出的框子中,输入github用户名和密码
在这里插入图片描述
命令行也输入github用户名和密码
在这里插入图片描述

网站效果

访问:https://swhat.github.io
在这里插入图片描述

发布文章

方法一:新建一个空文章,输入以下命令

 $ hexo n "文章标题"

如:执行hexo new "My New Post",会在项目 \Hexo\source\_posts 中生成 My New Post.md 文件,可以进行编辑。

方法二:也可以在项目 \Hexo\source\_posts下,新建md 文件,然后添加

title: 文章标题
date: 时间,如2020-02-02 02:02:02
categories: 类别
tags:  标签

在md文章中添加下面的句子,该句子以上可以显示你想显示的内容。

<!-- more -->

当我们用编辑器写好文章后,可以使用以下命令将其推送到服务器上

$ hexo clean
$ hexo g -d

博客优化

添加看板娘

1、安装模块
在hexo根目录执行命令

npm install --save hexo-helper-live2d

可以在package.json查看是否安装成功
在这里插入图片描述
此时再去 node_moduels目录下,可以看到有如下文件夹,这些都是动画主配置
在这里插入图片描述

2、下载模型
地址:https://github.com/xiazeyu/live2d-widget-models.git

下载好之后将packages里的所有动画模板拷贝到博客的node_modules目录下

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

也可以挑选自己喜欢的模型,使用命令安装模型,例如:

npm install live2d-widget-model-haruto

4.详细配置
在Hexo的 _config.yml 文件或主题的 _config.yml 文件中添加配置.

live2d:
  enable: true
  pluginModelPath: assets/
  model:
    use: live2d-widget-model-haruto  
    #模板目录,在node_modules里,这里是模型名称
  display:
    position: right
    width: 150 
    height: 300
  mobile:
    show: false  #是否在手机进行显示

博客加密

1.安装encrypt插件
在博客目录下执行下面的指令安装encrypt

npm install --save hexo-blog-encrypt

安装完成后,在package.json文件的dependecies依赖中看到encrypt插件
在这里插入图片描述

2 . 加密文章设置
将"password"字段添加到文章信息头部:

title: 文章标题
date: 时间,如2020-02-02 02:02:02
categories: 类别
tags:  标签
password: 123456
abstract: 这里有东西被加密了,需要输入密码查看哦。
message: 您好,这里需要密码。
wrong_pass_message: 抱歉,这个密码看着不太对,请再试试。
wrong_hash_message: 抱歉,这个文章不能被纠正,不过您还是能看看解密后的内容。

效果图
在这里插入图片描述

Typora + Gitee搭建图床

把图片拖进 md 编辑器,图片会自动上传到图床,上传成功图片顶部会出现绿色背景的白字进行提醒。该插件支持、GitHub、七牛云、阿里云、码云等。

安装环境

Typora 版本:0.9.68 (Windows x86)
下载地址:https://typora.io/windows/typora-update-ia32-0320.exe
Typora安装目录:D:\Program Files\Typora ,或者安装在其他目录

安装步骤

覆盖安装的方式在某些特定版本下会触发bug,建议按照这个 issue 中的方法修改 window.html 文件而不是直接覆盖它,plugins 是新增目录不存在覆盖的问题。

  1. 下载插件代码
  2. 复制插件相关代码文件:window.html、plugins;
  3. 将复制的插件代码文件,粘贴到typora安装目录下的 resources\app 文件夹下;
  4. 安装完成,重启typora

插件配置

插件默认会将图片上传到个人站点上(街边价),不能保证一直给大家提供服务,所以按照好插件后,强烈建议你换成自己的图片上传服务器。

更换图片上传接口地址,打开 plugins/image/upload.js 文件,拉到最下面 将最后一行的 $.image.init(); 按照下面的说明进行配置:

上传到码云

// !!!注意当图片大于1M时, gitee 必须登录后才能查看!!!
$.image.init({
    target:'gitee',
    gitee: {
            message: "From:https://github.com/Thobian",     // 必须参数,提交消息(默认为:add image)
            branch: "master",                               // 要提交到的分支(默认为:master)
            token: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',   // 码云token申请地址 https://gitee.com/profile/personal_access_tokens
            userName: 'userName',                           // 用户名 比如你的gitee个人主页地址是:https://gitee.com/thobian ,那userName就是:thobian
            repositorie: 'repositorie',                     // 仓库名 比如你的gitee图片仓库地址是:https://gitee.com/thobian/typora,那么repositorie就是 typora
            Folder: 'image',                                // 可以把上传的图片都放到这个指定的文件夹下
            BucketDomain: 'https://gitee.com/api/v5/repos/',// 这个是不用变的,直接copy就好
    }
});

部署到阿里云服务器

创建私有 Git 仓库

安装Git,Git 用于版本管理和部署

apt-get update
apt-get install git-core 

在 /var/repo/ 下,创建一个名为 hexo_static 的裸仓库,然后需要修改用户对目录的权限

sudo mkdir /var/repo/
sudo chown -R $USER:$USER /var/repo/
sudo chmod -R 755 /var/repo/

然后

cd /var/repo/
git init --bare hexo_static.git

配置Nginx托管文件目录

安装Nginx ,用于静态博客托管。

apt-get install nginx

创建 /var/www/hexo 目录

sudo mkdir -p /var/www/hexo

修改目录的所有权和权限

sudo chown -R $USER:$USER /var/www/hexo
sudo chmod -R 755 /var/www/hexo

修改 Nginx 的 default 设置

sudo vim /etc/nginx/sites-available/default

将root 指向 /var/www/hexo 目录,修改内容如下:

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/hexo; # 需要修改的部分
    index index.html index.htm;

然后重启 Nginx 服务

sudo service nginx restart

配置git hooks

在hooks文件中创建post-receive文件

vim /var/repo/hexo_static.git/hooks/post-receive

添加内容如下:

#!/bin/bash
git --work-tree=/var/www/hexo --git-dir=/var/repo/hexo_static.git checkout -f

将此文件设置成可执行文件

chmod +x /var/repo/hexo_static.git/hooks/post-receive

本地配置

修改_config.yml配置文件

# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: http://服务器IP

deploy:
    type: git
    repo: root@服务器IP:/var/repo/hexo_static
    branch: master

将本地内容上传云服务器

hexo g -d

第一次会出现下图所示错误
在这里插入图片描述
执行命令

ssh-keygen -R 服务器IP

再次执行hexo g -d即可成功
在这里插入图片描述

备案

添加备案号
在主题文件的layout_partial\footer.ejs中添加

 <!--添加备案号-->
<div class="footer-center">
         <!--img src="https://static.dy208.cn/o_1dfilp8ruo521thr1hvf18ji17soa.png"-->
         <a href="http://beian.miit.gov.cn/"  style="color:#f72b07" target="_blank">备案号</a>
  </div>

绑定域名

登录阿里云,并进入控制台,点击左侧菜单中的域名,进入域名管理,选择要解析的域名,点击解析,进入解析设置。点击添加记录
在这里插入图片描述
添加记录两条记录值,一个是www,一个是@,记录值阿里云服务器的地址(公)

在这里插入图片描述

注意:本文所有命令均在git
命令行使用

参考文章:
Hexo结合Stun静态博客搭建从入门到入土
hexo 添加live2d看板动画
记录本地Hexo博客部署到服务器上

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Atkxor

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值