• 环境配置
    • Github的创建和配置
    • 安装Git
    • 安装Node.js
    • 安装Hexo
  • Hexo主题设置
    • 主题1：stun
      • 安装
      • 使用
      • 更新
      • 本地效果
      • 主题优化
    • 主题2：black-blue
      • 安装
      • 使用
      • 更新主题
    • 主题3：spfk
      • 安装
      • 使用
      • 主题优化
  • Hexo部署到github
    • 配置github ssh
    • 部署文件
    • 网站效果
    • 发布文章
  • 博客优化
    • 添加看板娘
    • 博客加密
  • Typora + Gitee搭建图床
    • 安装环境
    • 安装步骤
    • 插件配置
  • 部署到阿里云服务器
    • 创建私有 Git 仓库
    • 配置Nginx托管文件目录
    • 配置git hooks
    • 本地配置
    • 备案
    • 绑定域名

环境配置

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.orgC:\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: gitrepo: github: {$你的博客仓库}gitee: {$你的博客仓库}branch: master#搜索相关
search:path: search.jsonfield: postcontent: true

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

#取消导航栏注释（注意空格对齐）
menu:categories: /categories/ || fas fa-layer-grouptags: /tags/ || fas fa-tags#更改图标(最好使用链接地址，我这里使用的图床，图床使用见下一篇博客)
favicon:small: https://gitee.com/BothSavage/PicGo/raw/master/image/favicon-16x16.pngmedium: https://gitee.com/BothSavage/PicGo/raw/master/image/favicon-32x32.png#更改背景大图
header:bg_image:enable: trueurl: https://gitee.com/BothSavage/PicGo/raw/master/image/背景.png#更改头像大图，并设为圆形
author:avatar:url: https://gitee.com/BothSavage/PicGo/raw/master/image/头像.pngrounded: 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: gitrepo: https://github.com/swhat/swhat.github.io.git #仓库名字改成自己的branch: master

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

server:port: 4001 #端口号随意，默认是4000compress: trueheader: 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: truepluginModelPath: assets/model:use: live2d-widget-model-haruto  #模板目录，在node_modules里，这里是模型名称display:position: rightwidth: 150 height: 300mobile: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_tokensuserName: 'userName',                           // 用户名 比如你的gitee个人主页地址是：https://gitee.com/thobian ，那userName就是：thobianrepositorie: 'repositorie',                     // 仓库名 比如你的gitee图片仓库地址是：https://gitee.com/thobian/typora，那么repositorie就是 typoraFolder: '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://服务器IPdeploy:type: gitrepo: root@服务器IP:/var/repo/hexo_staticbranch: 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博客部署到服务器上

Hexo个人博客搭建历程相关推荐

  1. Hexo个人博客搭建教程

    Hexo个人博客搭建教程 1 搭建前准备 1.1 环境配置 需要安装git.node,最后安装hexo 1.1.1 安装Git: 首先看电脑是否已经安装了git $ git 若提示not founde ...

  2. hexo个人博客搭建

    title: hexo个人博客搭建 date: 2020-10-14 21:06:50 tags: 随笔 copyright: false hexo个人博客搭建过程 安装软件 git nodejs t ...

  3. hexo+GitHub博客搭建实战

    我的个人博客链接:wangwlj.com 想要搭建类似的博客吗? 如果是,那就赶快点进来吧-- 手把手教学,现在开始!! PS: 将会在个人博客持续更新,本文链接:hexo+GitHub博客搭建实战. ...

  4. 【个人博客】Hexo个人博客搭建与配置详细教程 + Fluid主题 + Gitee发布

    文章目录 一.环境准备 1.1 安装 NodeJs 1.2 安装 Git 1.3 安装 Hexo 二.Gitee仓库搭建 2.1 Gitee账号注册 2.2 仓库搭建 三.Hexo博客搭建 3.1 基 ...

  5. Github+Hexo+matery博客搭建

    文章目录 前言 主题介绍 一.博客环境搭建 1. 下载Git和Node.js 1.1 Node.js的安装与配置 1.2 Git的安装与配置 二.Github注册以及Github Pages创建 三. ...

  6. 个人网站搭建 03——Hexo + Github 博客搭建

    使用 Github Pages 服务搭建博客的好处有: 全是静态文件,访问速度快: 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 可以随意绑定自己的域名,不仔细看的话根 ...

  7. hexo + gitcafe 博客搭建

    环境: ubuntu 14.04 hexo gitcafe gitcafe是国内的代码托管,支持自定义访问域名,速度相较于github而言要快,hexo是一个快速 简洁且高效的博客框架.Hexo使用M ...

  8. Hexo+Github博客搭建之Matery主题个性化修改篇（一）

    首先声明一下,一定要分清什么是站点配置文件,什么是主题文件,比如我在F盘新建我的博客文件夹,名称为blog,那么站点配置文件的路径为F:/blog/_config.yml,而你的主题配置文件路径为F: ...

  9. hexo个人博客搭建（二）butterfly主题配置

    Butterfly主题安装文档(二)之主题配置 一.回顾安装butterfly主题 1.在hexo项目根目录下执行操作clone主题 git clone -b master https://githu ...

最新文章

  1. php中的全局变量$_REQUEST
  2. npm install是什么命令_了解npm
  3. Linux下Tomcat与Apache Web服务器的整合
  4. 线上分享 | 价值与风险，像投资者一样做产品决策
  5. ARP协议在同网段及跨网段下的工作原理
  6. C#单例模式的简单使用
  7. python 连续等于
  8. Druid-1.1.12.jar下载 （链接下载+使用）
  9. 曼车仪表显示故障车载计算机,汽车仪表盘上的故障标志图解大全
  10. 如何利用Python网络爬虫抓取微信好友数量以及微信好友的男女比例
  11. 上海电力学院计算机组成与结构试卷,数据结构
  12. Brute Force（暴力破解）
  13. WebOffice安装教程Hello World!（win10 IE打开控件问题）
  14. 白杨SEO：QQ群SEO是什么？QQ群排名如何做引流与营销？【举例】
  15. 【值得读】自动机器学习: 最新进展综述与开放挑战 | AutoML
  16. 在该系统上全局禁用了虚拟打印功能，不会为该虚拟机启用此功能。虚拟设备“serial0“”将开始断开连接。
  17. C# 判断本机是否安装Excel及多版本安装?获取Excel进程信息和打开Excel应用软件
  18. java技术核心卷II书目
  19. ffmpeg设置视频 tbr、tbn、tbc
  20. 2021年转行产品经理十大常见问题汇总

热门文章

  1. 【NLP】Seq2Seq原理详解
  2. nginx启动与关闭
  3. cpu计算速度排行榜_比拼浮点运算速度 超算排行榜是这样“算”出来的
  4. WakeData惟客数据李柯辰：数据化建设要进行场景化迭代，形成数据闭环
  5. 华为鸿蒙系统nova8se,华为nova8 SE曝光，配置诱人，外观很iPhone 12
  6. 黑鲨3能升级鸿蒙5g吗,黑鲨3Pro与红魔5G，同为5G游戏手机，二者相比区别在哪
  7. 数据压缩实验一：yuv转rgb格式实验报告
  8. oracle 考试技巧,从 TPCH 测试学习性能优化技巧
  9. Python自动化处理Excel表格实战完整代码分享（课表解析）
  10. win7 桌面 计算机无法打开,电脑进不了桌面怎么回事_电脑开机无法进入桌面的解决教程-win7之家...