用我的指尖实现我的技术梦
1️⃣MyBlog-Hexo搭建自己的博客

目录

  1. 1. 系列 📒
    1. 1.1. 发布博客
    2. 1.2. 系列文章目录
  2. 2. 关于Hexo
  3. 3. 安装Git | Node
  4. 4. 安装Hexo
  5. 5. 开始 ✨
    1. 5.1. 基础环境
    2. 5.2. 主题配置
    3. 5.3. 开始创作
    4. 5.4. 博客部署
  6. 6. 参考文档

MyBlog 系列文章之一, 这篇文章, 介绍如何使用Hexo搭建博客环境, 以及Hexo的基本用法.

系列 📒

我的博客(码之泪殇|技术博客)是基于Hexo搭建的, 代码托管在GitHub和Coding, 部署在阿里云服务器, 其中部署是基于Coding提供的持续集成.

发布博客

在本地编写 Markdown 文件, 然后将代码push到托管平台, 即可自动触发持续集成, 将网页部署到云服务器, 全自动~

系列文章目录

  1. MyBlog-Hexo搭建自己的博客
  2. MyBlog-多平台代码托管
  3. MyBlog-Hexo项目持续集成发布

关于Hexo

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

安装Git | Node

  1. 本地环境: 我用的是Mac, 以下所有操作都是基于 MacOS 系统, 关于其他平台软件安装, 大同小异.
  2. 安装 Hexo 相当简单,只需要先安装下列应用程序即可:
    • Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)
    • Git
  3. MacOS使用 brew|brewcask 安装非常简单, 这里不做赘述, 其他系统也可去某度搜索, 安装很easy的~

安装Hexo

  1. 打开终端, 创建个人博客存放目录(eg: blog.gongsir.club):
    1
    mkdir blog.gongsir.club
    1
    cd blog.gongsir.club
  2. 终端执行 Hexo 安装命令:
    1
    npm install -g hexo-cli
  3. 终端输入以下命令查看hexo信息,成功即可:
    1
    hexo -v

开始 ✨

基础环境

接下来就可以开始使用hexo搭建一个 “Hello World” 页面了。

  1. 使用hexo的hello-world初始化你的博客(此时会自动使用Git克隆项目):
    1
    hexo init
  2. 安装hexo所需依赖:
    1
    npm install
  3. 启动,预览:http://localhost:4000
    1
    hexo s

成功看到Hexo的Hello——World页面即表示Hexo建站成功,但是似乎UI不太喜欢,想改下主题,所以后续来了!!!

主题配置

  1. 我尝试过很多主题,在hexo的主题官网有很多themes,但是感觉都不是我想要的,最后在github上发现了一款不错的主题——hexo-theme-blank

  2. 主题安装这里需要注意一下,假设我们希望将整个博客文件放在Github进行托管,而我们安装主题时通常是直接在themes文件夹下克隆主题仓库:

    1
    git clone https://github.com/a2396837/hexo-theme-blank.git blank

    当我们修改了我们的博客内容,向github提交代码的时候,就会出现冲突,因为我们的themes/blank包含在博客目录下(即git工程包含了git工程),解决这个问题最简单的方法就是将themes/blank下的.git文件夹删除,此时themes/blank就是一个普通文件夹,博客项目就可以直接push到github。

    但是我们考虑到主题在今后可能会有升级的情况,主题目录使用git pull即可完成升级,因此就不能删除主题目录的.git,建议使用Git子模块对整个项目进行代码托管:
    在博客根目录执行:

    1
    2
    3
    4
    ## 下载主题
    git clone https://github.com/a2396837/hexo-theme-blank.git themes/blank
    ## 将主题文件夹添加为git子模块
    git submodule add https://github.com/a2396837/hexo-theme-blank.git themes/blank

    之后我们的博客根目录就会自动生成一个.gitmodules的文件,记录了子模块的信息,接下来我们正常操作父项目就可以了,想学习更多关于git子模块的知识,可以去官网学学~

  3. 为了主题在今后能够进行平滑升级,我们不要在主题文件夹直接修改配置,解决方法是将主题中的._config.yml拷贝到博客根目录的source/_data(需要自己新建_data)目录下,并重命名为blank.yml,然后在blank.yml进行主题配置:

    1
    2
    mkdir source/_data
    cp -p themes/blank/_config.yml source/_data/blank.yml

    开始创作

  4. hexo可以直接解析md文档,我们只需新建一个md,然后编辑md即可:

    1
    hexo new "blog-title"
  5. 以上会在source/_post目录下生成一个名叫“blog-title”的md文件,使用vscode编辑:
    vscode编写md

  6. 生成静态网页文件:使用hexo的命令将md和主题样式解析成html文件,并保存在public/下:

    1
    hexo g
  7. 运行方式:

    1. 因为生成的是静态html,因此可以直接打开public/,双击index.html运行;
    2. 使用hexo s | hexo s --debug (debug模式).

博客部署

将生成的public/目录下的静态文件(html、csss、js等)直接部署到你的服务器(可以使用scp、ftp等服务),再配置nginx即可访问.

但是这样很麻烦,每次写一篇,都需要以下步骤:

  1. hexo clean: 清除public/缓存;
  2. hexo g: 重新生成静态文件;
  3. 手动部署到你的服务器.

其实我们不用这么麻烦,当我们写完一篇博客之后,直接将代码push到托管平台,之后就可以自动解析、自动部署.如何实现? 看后续… …

参考文档


hexo hexo-theme-blank MyBlog
2️⃣MyBlog-多平台代码托管
© 2020 码之泪殇
Powered by hexo | Theme is blank