Skip to main content

从零开始搭建个人博客-Hexo框架

· 预计阅读时间:2 分钟
摘要

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用主题生成静态网页。本文将简单如何使用Hexo搭建个人博客,并将博客部署到GitHub ...

1、环境搭建#

1.1、安装nodejs#

  • (1)、下载nodejs下载后直接默认选项安装即可:进入下载(请选择稳定版)
  • (2)、测试nodejs安装是否成功
    • 打开命令行工具输入 node -v 命令回车后出现版本号即成功
  • (3)、测试npm是否安装成功
    • 安装nodejs是会默认安装npm包管理器,Hexo框架需要通过npm管理工具进行安装,在命令行输入 npm -v 出现版本号即安装成功

1.2、安装Hexo#

  • (1)、安装命令
    npm install -g  hexo-cli
  • (2)、验证安装成功
    • 输入命令 hexo -v 出现版本号即成功

1.3、安装git#

  • (1)、下载安装 进入下载
  • (2)、验证
    • 输入命令 git --version 出现版本号即成功

2、开始搭建博客#

2.1、hexo初始化#

  • (1)、创建并进入项目文件夹(blog)并在该目录下打开命令行工具
  • (2)、通过hexo命令初始化博客
    hexo init

    提示:start blogging with Hexo!即初始化完成,此时该文夹下就生成了项目文件

2.2、运行hexo服务预览博客#

  • (1)、开启服务
    hexo s
  • (1)、关闭服务
    • 按住ctrl+c即可结束该服务

2.3、创建文章#

  • (1)、创建新文章
    hexo n  "文章标题"

    回车后出现以标题命名的.md文件路径,打开该文件使用md语法编辑内容,或者直接在该目录下创建md文件并以指定的开头模板

2.4、更新文章#

  • (1)、文章创建后需要解析文章依次执行如下命令

    清理缓存

    hexo clean

    解析生成

    hexo g

    运行hexo服务预览博客

    hexo s

3、将博客部署到GitHub#

3.1、登录github创建仓库#

  • 仓库名必须为 [github user name].github.io
  • 示例(我的github用户名为:is-zhou因此我的仓库名如下)
    is-zhou.github.io

3.2、在本地项目中安装git部署插件#

  • (1)、项目文件根目录下打开命令行工具输入如下
    npm install --save hexo-deployer-git

3.3、修改项目根目录下的配置文件 _config.yml#

  • (1)、找到最下边的deploy: type: 进行如下编辑
      type:git   repo:github上创建的仓库地址  branch:master       

3.4、发布到GitHub#

warning

is-zhou.github.io该地址已重写为个人主页,查看该项目发布预览请转到https://is-zhou.github.io/hexo.blog/

4、更换Hexo博客默认主题#

4.1、将主题文件下载到本地项目的 themes文件夹下#

  • (1)、选择主题
    • 在github中搜索hexo-theme 结果的右上角Sort:Most stars排序方式,选择主题比如:themes/yilia后进行克隆下载
  • (2)下载主题(在本地项目根目录下打开命令行工具)
      git clone https://github.com/litten/hexo-theme-yilia.git  themes/yilia

4.2、修改配置文件 _config.yml#

  • (1)、找到:#Extensions项下的 theme:将值换成下载到themes文件夹下的主题文件夹名称并保存

4.3、更新并重新部署#

  • (1)、按如下命令依次执行
      hexo clean
      hexo g
      hexo d

5、项目源码#

项目源码仓库 https://github.com/is-zhou/hexo.blog.source