简单介绍

一直想拥有一个属于自己的博客主站，便于记录平时工作中遇到一技术问题 或是生活琐事，于是在网上搜索了如何搭建博客，了解到hexo使用的人还挺多，那就行动起来，在网上一边搜教程一边搭建，本站是基于Hexo+butterfly 的，感谢网上各种前辈的分享，让我学习了很多

Hexo基本搭建

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。一个命令即可部署到 Github页面、 Giteee、 Heroku等平台，强大的APl,可无限扩展,拥有数百个主题和插件供用户自主安装

hexo官方文档

安装前提

安装Node.js

(Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本

Node.js 为大多数平台提供了官方的 安装程序。对于国内用户，可以前往 淘宝 Node.js 镜像 下载

  • Windows：通过 nvs（推荐）或者 nvm 安装。
  • Mac：使用 Homebrew 或 MacPorts 安装。
  • Linux（DEB/RPM-based）：从 NodeSource 安装。
  • 其它：使用相应的软件包管理器进行安装，可以参考由 Node.js 提供的 指导。

安装Git

  • Windows：下载并安装 git.
  • Mac：使用 Homebrew, MacPorts 或者下载 安装程序。
  • Linux (Ubuntu, Debian)：sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

也可以使用cnpm

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

安装Hexo

以上安装前提的应用程序安装完成后，就可以使用npm进行安装

npm install -g hexo-cli  #或者： cnpm install -g hexo-cli

查看是否安装成功和对应安装的版本

hexo -v
#若有正常版本输出表示安装成功

搭建博客主站

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

hexo init myblog

初始化完后，切换到博客主目录

cd  myblog
npm install   #或者cnpm install

查看当前目录文件

_config.landscape.yml
themes #主题文件夹。Hexo 会根据主题来生成静态页面。
scaffolds #模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。
source # 资源文件夹是存放用户资源的地方
public
package-lock.json
package.json #应用程序信息
_config.yml #网站配置信息，后续主站配置需要在这个配置文件进行修改
db.json
node_modules
.deploy_git
.github

启动服务站点

hexo 三板斧命令 启动服务

hexo cl    #完整命令是hexo clean   清理缓存文件
hexo g     #hexo generate    用于生成静态文件
hexo s     #hexo server     命令用于启动本地服务

正常输出表示启动成功

INFO  Validating config
INFO 
  ===================================================================

      #####  #    # ##### ##### ###### #####  ###### #      #   #
      #    # #    #   #     #   #      #    # #      #       # #
      #####  #    #   #     #   #####  #    # #####  #        #
      #    # #    #   #     #   #      #####  #      #        #
      #    # #    #   #     #   #      #   #  #      #        #
      #####   ####    #     #   ###### #    # #      ######   #

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

然后通过 http://localhost:4000/ 可以正常访问（使用的是默认主题）

1660970724356

GitHub上建站访问

将 Hexo 博客部署到 GitHub Pages 上，如果还没有github账号的，需要先去注册账号，具体如何注册，这里就不做介绍了，

新建github仓库

仓库名称限制了为你的：用户名+.github.io。我这里使用的是我自己用户名 chen1900s

image-20220831181326723

git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/chen1900s/chen1900s.github.io.git
git push -u origin main
#已有仓库
git remote add origin https://github.com/chen1900s/chen1900s.github.io.git
git branch -M main
git push -u origin main

推送站点到github

1，安装hexo上传插件

npm install hexo-deployer-git --save
或者
cnpm install hexo-deployer-git --save

2，修改hexo配置文件指定仓库路径

可在hexo博客主目录文件夹中直接打开文件，也可通过vim直接编辑

vim _config.yml 
#找到
deploy:
  type: git
  repo: https://github.com/chen1900s/chen1900s.github.io.git
  branch: master

3，运行命令（执行命令时候需要在博客主目录执行）

hexo clean && hexo g && hexo deploy`

需要配置github ssh公私钥访问

主站访问

输入你的仓库名称,即可访问成功。

https:// username.github.io

安装主题

创建 Hexo 主题非常容易，您只要在 themes 文件夹内，新增一个任意名称的文件夹，并修改 _config.yml 内的 theme 设定，即可切换主题。

到GitHub上搜索hexo主题或者hero自带的主题https://hexo.io/themes/。

这里我选择butterfly 主题进行配置

butterfly 官方主题

按照各自的主题文档上面一步步操作即可。

一般步骤： 

1、下载解压主题 或者使用命令行
2、放到主题包themes文件夹下面
3、在hero配置文件_config.yml中修改为喜欢主题的名字
4、hero server启动即可访问

安装

在你的Hexo 根目录里执行

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

或者手动下载下来 上传到博客根目录

应用主题

修改 Hexo 根目录下的 _config.yml，把主题改为butterfly

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

修改完成后，重启服务

#1，清理
hexo clean
#2 构建静态文件
hexo g
#3，上传至仓库
hexo deploy

创建博客文章

在Hexo根目录文件夹中打开终端 ，输入如下命令创建文章，hexo会在source文件夹下创建一个markdowm的文件。这就是你要编写的文章。

hexo new “这里填入文章的标题”

用软件typora打开直接编写文章 ， 在上传更新到github上立马能够查看到。 

#1，清理
hexo clean
#2 构建静态文件
hexo g
#3，上传至仓库
hexo deploy

草稿箱

有时候我们需要先写成草稿，而暂时不发布出去。draft page就可以满足我们的要求，我们的网站上是看不到草稿文件的

//新建草稿文件
hexo new draft b

//预览草稿文件
hexo server --draft

//发布草稿hexo publish

新建页面

有时我们不满足主题自由的一些页面，希望自己添加一些标题页面。

我们可以新建页面，新建页面则会在hexo的source中新建该页面文件并生成md文件，这就是你要编辑的博客页了。

hexo new page "resouces"

然后打开主题的配置文件_config.yml，在菜单属性menu中的添加如下（注意不是Hexo的配置文件）

将页面路径联接到页面上去

菜单自定义名称：/生成的页面名称

具体见我下一篇文章的butterfly主题优化

写在最后

感谢占用您的时间阅读，如果有不对的地方随时吐槽