环境配置
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 是新增目录不存在覆盖的问题。
- 下载插件代码
- 复制插件相关代码文件:window.html、plugins;
- 将复制的插件代码文件,粘贴到typora安装目录下的 resources\app 文件夹下;
- 安装完成,重启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博客部署到服务器上