快来用hexo+github打造个人博客吧~

星雪
471 阅读3分钟

PS：对前端技术感兴趣的朋友们，可以关注下我的《致力于前端的技术博客》哦！如果对你有帮助，欢迎赠个⭐️，会常更新内容，敬请期待！❤️❤️

这是使用hexo打造的我的个人博客的效果: YP blog，话不多说，让我们来看看如何快速地搭建一个属于你的博客吧！

搭建的具体流程

  • 安装 git，申请 github 账号，生成 ssh 密钥，在 github 新建 new SSH Key
  • 在 github 新建个人仓库用户名，取名为**''用户名.github.io''**这个用户名使用你的 GitHub 帐号名称代替，这个是固定写法
  • 安装 nodejs
  • 安装 hexo npm install -g hexo-cli
  • 初始化博客 hexo init [name]创建博客项目
  • 为了检测网站别按顺序输入以下命令：hexo g 、hexo s，打开 localhost:4000 查看网站是否成功显示
  • 关联 github，安装包npm install hexo-deployer-git --save，修改_config.yml 配置文件
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/name/name.github.io.git  #记得加.git
  branch: master
  • 分别运行hexo g 、hexo s，在https://yourname.github.io/查看博客（在下方会讲命令的具体作用）
  • 关于主题更换（默认是 landscape 主题，如果想更换主题请看这里） 在主题官网选择好主题，找到对应的 github 仓库，git clone [theme path] themes/[theme name]安装到本项目的 themes 文件夹下，并修改_config.yml 配置文件中 theme（名字与你命名的主题文件夹名字相同），再分别运行
hexo clean  #清除缓存
hexo g   #相当于hexo generate，生成博客
hexo d   #相当于hexo deploy，部署博客

打开你的博客地址即可看到效果

  • 关于博客书写 hexo n "博客名字"，会在source/_posts文件夹下生成 markdown 文件，使用 markdown 语法书写博客即可，建议使用Marxico可视化工具编写（也可以采用其他的可视化工具，视个人而定）
  • 博客的格式 博客的大体可以采用以下格式（不同主题格式或许有些不同，可以自行查阅相关文档）：
---
title: Hello World
date: 2019-07-25
author: XXX
categories: XXX
tags:
  - Android
comments: true
cover_picture: /images/banner.jpg
---

这里写博客开头部分内容

# 如果添加下行语句，文章会自动生成“更多”按钮，点击后 more 后面的内容才会显示

<!-- more -->

这里写后续的博客内容
  • 关于图片 如果采用本地项目文件夹存储图片，每次打开博客会加载大量的图片，会导致性能有所下降，建议使用图床存储，如七牛 或 贴图库 ，在文章中直接采用外链引入图片

[坑]：如果 hexo g 生成的文件缺少 index.html 和 archive，部署后打开博客会出现 404 的错误说找不到 index,html 文件,在 github 仓库中打开确实没有.造成这个问题的原因是缺少相应的 npm 包，输入命令npm ls --depth 0，安装好缺少的包重新发布即可.好像是因为安装了新的主题而引起的,这个问题也是折腾了我好久.-_-

hexo 常用命令

npm install hexo -g #全局安装Hexo
npm update hexo -g #升级hexo
hexo init #初始化项目
hexo n "name" <=> hexo new "name" #新建名为name的文章
hexo g <=> hexo generate #生成博客
hexo s <=> hexo server #启动服务，本地预览效果
hexo d <=> hexo deploy #部署博客

发布文章的完整流程：

  1. 新建文章
    • 方法1：直接使用hexo n "name"新建名为name的文章
    • 方法2：在source/_posts目录下新建{name}.md的文章，先补充基础信息（上面展示的博客格式）
  2. 文章预览（非必需） hexo s
  3. 文章清理&文章生成&文章部署：hexo clean & hexo g & hexo d
  4. 打开博客地址https://yourname.github.io/，即可看到博客发布成功
avatar
文章
阅读
粉丝