为什么要搭建个人博客

好记性不如烂笔头，方便日后整理回顾
免费方便，不需要服务器不需要后台，不需要依赖除了git的外部服务
可以随意绑定自己的域名，不仔细看的话根本看不出来你的网站是基于github的
数据绝对安全，基于github的版本管理，想恢复到哪个历史版本都行
博客内容可以轻松打包、转移、发布到其它平台
全是静态文件，访问速度快
为什么写博客：http://mindhacks.cn/2009/02/15/why-you-should-start-blogging-now/

准备工作

1. Git 下载（Git for windows 国内下载）、安装（安装时请勾选Add to PATH选项）、配置、生成SSH公钥

2. Github 账号申请 / Gitee（码云）账号申请、GitHub Windows客户端、配置SSH Keys

3. Node.js 下载安装

4. 文件编辑器 Markdown / Typora / Sublime Text / Notepad++

使用Hexo、Node.js、Git搭建个人博客

HEXO 安装

Hexo 是一个快速、简洁且高效的Node.js静态博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

本教程Hexo 安装版本为：vs_3.4.3；Node.js 版本为：vs_8.9.3。安装 Hexo 之前请先确保 Git 及 Node.js 安装成功，接下来只需要使用 NPM 即可完成 Hexo 的安装。

在计算机新建一个文件夹作为本地仓库，进入到文件夹中单击右键，选择 “Git Bash Here” ，进入Git Bash进行Hexo 下载：

方法一：

安装cnpm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org使用cnpm安装hexo
$ cnpm install -g hexo-cli

方法二：

$ npm install -g hexo-cli如果安装失败，尝试切换安装源后再执行安装命令 npm install -g hexo-cli官方源：
npm config set registry https://registry.npmjs.org/淘宝镜像：
npm config set registry http://registry.npm.taobao.org/

注：如果提示权限错误，命令前加sudo,cnpm 是淘宝的开源镜像，国内访问比npm快。

Hexo 更新至最新版本，命令如下：

$ npm update hexo -g

确认cnpm的版本和Hexo 版本信息，查看是否安装完成

$ cnpm -v$ hexo -v

HEXO 初始化及本地启动

执行下列初始化命令，Hexo 将会在当前文件夹中生成一个名为blog的文件（可以根据需要修改命令即可修文件名），文件内容包括：node_modules、scaffolds、source、themes等文件

$ hexo init blog
$ cd blog
$ npm install

输入以下命令生成静态页面：

$ hexo generate

新建完成后，指定文件夹的目录如下：

.├── _config.yml 网站的配置信息，您可以在此配置大部分的参数├── package.json 应用程序的信息├── scaffolds 模板文件夹├── source 资源文件夹，存放用户资源|   ├── _drafts|   └── _posts└── themes 网站主题文件夹

接着输入命令启动服务：

$ hexo server

打印信息如下表示服务启动成功：

INFO  Start processingINFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

然后在浏览器中访问：http://localhost:4000/，如果4000端口被占用，可以更改端口号为8081

$ hexo s --p 8081INFO  Start processingINFO  Hexo is running at http://localhost:8081/. Press Ctrl+C to stop.

如果博客出现中文乱码，使用编辑器编辑 _config.yml 文件，设置编辑器的编码为 UTF-8 后进行保存即可。

hexo搜索功能

安装插件

到博客根目录打开Git bash here执行安装命令

cnpm install hexo-generator-searchdb –save

修改站点配置文件

打开_config.yml 配置文件，在最底下添加下面代码

search:path: search.xmlfield: postformat: htmllimit: 10000

path：表示搜索后生成的文件路径，可以生成xml和json两种格式；search.xml不可以就改为search.json

field：表示搜索的范围，有“post、page和all”三种值。

post：所有的文章；

page：所有顶部导航选项的页面；

all：所有的文章和顶部导航选项的页面。

content：是否包含搜索到的文章的全部内容。如果false，生成的结果只包括标题和创建时间这些信息，没有文章主体。默认情况下是true.

format：搜索到的内容、选项的格式。

html(默认)：将html原文本缩略。

striptags：将html原文本缩略，并删除所有标记。

raw：记下每一篇文章或每一页的文字。

使用插件

打开博客目录目录，找到当前正在使用的主题的“_config.yml”文件，打开进行编辑，找到“local_search”,
不同模板这个字段可能不同，修改enable的值为true。

# 本地搜索
search_box: enable: true

编写博文

进入\source\_posts文件下新建后缀为.md的markdown文件，编辑并保存，这就是一篇新的博文

也可以通过命令创建，常见命令如下

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面，不会作为文章出现在博文目录。
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

如果博客的样式不对，尝试在_config.yml中配置下博客地址和路径：

url: https://github.com/用户名/用户名.github.io.git/blog/
root: /blog

Hexo 部署至 Github

新建仓库 new repository ，命名为你的用户名.github.io（必须是你的用户名，其它名称无效，邮箱需要认证）

创建好仓库后，复制仓库地址：github.com/用户名/用户名.github.io.git

修改 _config.yml 配置文件，打开文件后找到 deploy，修改如下：（注意冒号后面有一个空格： ）

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:type: git##repo: https://gitee.com/用户名/用户名.gitrepo: https://github.com/用户名/用户名.github.io.gitbranch: mastermessage:

编辑完成后进行保存，接着安装自动部署发布工具 hexo-deployer-git，命令如下：

$ npm install hexo-deployer-git --save

等待安装完成以后，执行如下配置命令：

$ hexo deploy

发布新博客或者更新配置文件，需要重新部署一下，首次发布需要输入账号和密码，命令如下：

$ hexo clean
$ hexo generate
$ hexo deploy

在Github的上边栏选择Settings

找到GitHub pages设置界面

按如图所示选择，注意，选择source之后记得Save，然后点击Choose a theme选择一个博客主题，然后点击Select theme

在Gitee中选择服务下面的Gitee Pages，进行服务部署

发布完成，在Github/Gitee中部署项目

正常部署完成后打开浏览器输入：【https://您的 Github 名称/github.io】进行访问，例如：https://用户名.github.io。

修改Hexo 配置及博客主题

修改配置

title 网站标题
subtitle 网站副标题
keywords 网站的关键词。支援多个关键词。
description 网站描述。主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词
author 您的名字。用于主题显示文章的作者
language 网站使用的语言。常见的有 zh-Hans和 zh-CN。
timezone 网站时区。默认使用您电脑的时区，对于中国大陆地区可以使用 Asia/Shanghai。

其他相关详细配置信息请参考 Hexo 配置：https://hexo.io/zh-cn/docs/configuration.html

选择主题

使用的主题都是放在/themes这个目录下，Hexo默认使用的是landscape主题，下载新的主题下来后，解压放入/themes文件夹下

选择一个自己喜欢的Hexo主题：https://hexo.io/themes/；https://github.com/hexojs/hexo/wiki/Themes

输入命令克隆主题：git clone https://gitee.com/xiuxiuing/hexo-theme-even themes/even ，完成后可以看到/themes下新增了even 文件夹。

以下为推荐主题：

ayer：一个美观实用且优雅的 Hexo 主题（推荐）。Preview 预览
butterfly：一个功能强大且复杂的主题。Demo: Butterfly
volantis：好看强大的图文集合。See docs: https://volantis.js.org
fluid：一款Material Design 风格。预览： Fluid's blog
magnetic：卡通卡片风格。Demo here.
Cxo：简约实在的主题。demo：Mr.Long's Blog
alpha-dust：科技风，Check out the demo
cactus：有点命令行界面的感觉。Demo
hexo-theme-arknights：明日方舟罗德岛阵营主题。Demo： http://ark.theme.yueplus.ink/
anatole-core：炫酷的分类标签，类似词云。Demo : https://www.jixian.io

主题更新

修改_config.yml文档内容中theme的值，将默认主题修改为下载的主题名（即/themes/下的文件名称）

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
## theme: landscape
theme: even

本地启动时，主题更新需要将服务重启。部署到GitHub后，进入到主题文件夹的目录下（如：../blog/themes/yilia/）执行推送更新命令

$ git pull

然后返回到文件夹 ../blog 下，每次修改完配置文件，需要重新部署项目

$ hexo clean
$ hexo generate
$ hexo deploy

上传本地图片到博客

我们需要将图片上传到外部服务后，在博客中使用生成的图片url，这里推荐PicGo软件，也可以上传到qq微博等能公开访问的第三方平台

使用Github：https://blog.csdn.net/qq_45163122/article/details/105584394

使用Gitee：https://blog.csdn.net/u013206259/article/details/105911868

hexo主题看板娘

链接：https://github.com/EYHN/hexo-helper-live2d

其他模型：https://github.com/xiazeyu/live2d-widget-models
模型预览：https://huaji8.top/post/live2d-plugin-2.0/
模型推荐，白猫：tororo，黑猫：hijiki，妹妹：shizuku，水手：haruto/koharu

模型安装命令

npm install --save hexo-helper-live2d
npm install --save live2d-widget-model-tororo

#在hexo的_config.yml的文件下添加(非主题配置文件)

live2d:enable: truescriptFrom: localpluginRootPath: live2dw/pluginJsPath: lib/pluginModelPath: assets/# 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中tagMode: falsedebug: false# 更换模型# 使用 npm install 模型的包名 来安装,然后将包名输入位于 _config.yml 的 model.use 中.model:use: live2d-widget-model-hijiki#use: live2d-widget-model-tororodisplay:position: rightwidth: 150height: 300hOffset: 40vOffset: -38# 手机是否显示mobile:show: falsescale: 0.2# 透明度react:opacityDefault: 0.8opacityOnHover: 0.2

参考：

使用Node.js+Hexo+Github搭建个人博客：https://www.cnblogs.com/wumz/p/8030244.html

使用Hexo、Node.js、Gitee搭建个人博客：https://wxtsy.gitee.io/2020/07/06/blog/%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A220200706/

三分钟在GitHub上搭建个人博客：https://zhuanlan.zhihu.com/p/28321740

用github page搭建博客：https://www.zhihu.com/question/59088760

使用Git搭建个人博客相关推荐

node mysql 搭建博客_node.js+Hexo+Git搭建个人博客
今早上考完试回来,接到腾讯云的每月邮件续费通知. 对于一个小开发来讲,买一个云服务器建站最方便不过,但是对于学生党来说还是有些贵. 一想明年7月份,云服务器就一元每月变65每月,加上30来块的域名费, ...
Hexo+OSChina（码云）+git 搭建个人博客
1). 安装Node 2). 安装Git 3). 注册码云 4). 安装Hexo npm install hexo-cli -g 图1.png 5). 在一个空文件夹中初始化hexo hexo ini ...
hexo+git+github+域名搭建个人博客提示404_不用花一分线，松哥手把手教你上线个人博客...
有不少小伙伴私信松哥,打听松哥的博客是怎么做的,其实这个我之前和大家聊过,今天就再来说一说. 我记得是 2015 年 4 月 15 在CSDN上发表了我的第一篇博客,是一个学习笔记,从那之后开启了我博 ...
Hugo + Github Pages 搭建个人博客
尝试过 Hexo .GatsbyJs. Vuepress 搭建博客后,对这些工具最大的不满,就是运行速度以及打包速度. 后来看到 Hugo ,号称最快的静态站点生成器后. 尝试搭建博客,发现不管是运行 ...
Hexo+github搭建个人博客－博客发布篇
通过 Hexo+github搭建个人博客-环境搭建篇以及 Hexo+github搭建个人博客-博客初始化篇 ,我们了解到了利用Hexo搭建个人博客需要的环境以及配置,下面这篇文章将会介绍如何把我们的 ...
史上最详细“截图”搭建Hexo博客——For Windows
http://angelen.me/2015/01/23/2015-01-23-%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86%E2%80%9C%E6%88 ...
在Github上搭建Jekyll博客和创建主题
在Github上搭建Jekyll博客和创建主题之前本来想展开写的,后来发现Jekyll官网的教程已经非常完善了就没有多写,所以只有这篇. 但是过了这么久,发现很多人还是不清楚怎么搭建,所以这里打算详 ...
Vue + VueRouter + Vuex + Axios 抓取 GitHub 上的 Issues 来搭建个人博客站点
项目背景刚接触 GitHub 的时候就开始在仓库 bingoogolapple.github.io 里创建 Issues 来记录学习笔记,那时候我还不知道有 GitHub Pages,后来了解到了可 ...
Hexo+github搭建个人博客－博客初始化篇
文章推荐精选java等全套学习资源精选java电子图书资源精选大数据学习资源 java项目练习精选上一篇博文 [<Hexo+github搭建个人博客-环境搭建篇>](http:// ...

使用Git搭建个人博客