Hexo + github 实现静态个人博客

还在大学的时候就想要搭建一个自己的博客,无奈大学浑浑噩噩,毕业快半年才意识到自己实在荒废太多了。废话不多说了,现在动手永远不晚。

前言

Hexo + github 实现静态个人博客。

关于静态博客

静态博客:不需要服务器,数据库,访问速度快,最后也是我选择他的原因支持Markdown。(插播一句,如果没有体验过使用 markdown写作,可以去尝试一下)

Hexo 搭建本地博客

安装

一些简单的安装就不过多赘述,自行百度解决,我只提供一些思路和搭建过程中遇到的几个坑。

  1. 安装 node.js
  2. 安装 git
  3. 安装 Hexo 使用 npm ( Node.js 平台的默认包管理工具)安装npm install -g hexo-cli
    npm

HEXO的创建与启动

  1. 创建一个文件夹,用于放置Hexo文件 (可以自定义)
  2. 在终端打开到刚刚创建好的文件目录,输入指令
hexo i blog // 初始化 blog项目
cd blog // 切换到站点根目录
hexo g // 生成静态页面
hexo s // 部署到本地
  1. 打开浏览器 localhost:4000查看。如果看到hexo默认墨客就说明本地博客已经搭建成果,下一步就是美化博客,切换主题了。

更换主题(NEXT)

  1. 同样在 blog 项目的根目录下输入 git clone https://github.com/iissnan/hexo-theme-next themes/next
  2. 打开 blog 目录下的 _config.yml 文件,进行编辑,修改 theme 字段为要用的主题名,这里我们将默认的 landscape 改为 next 重点 不要在配置文件中使用 tab ,冒号后面一定要有空格
  3. 输入指令, 再次打开浏览器localhost:4000,可以看到主题已经切换为 next 了,而 next 主题又包含3个版本。
hexo clean // 清除缓存
hexo g
hexo s
  1. next 版本切换,在themes/next/_config.yml 文件中修改,需要与项目的配置文件相区分。scheme: Pisces
  2. 重新部署

github

注册与设置

  1. 注册 github
  2. 新建 Repository,仓库名称需要和用户名对应,必须以your_username.github.io格式为标准
  3. 在创建的项目中的 setting 创建 GitHub Pages

部署项目

  1. 进入文件夹根目录,打开配置文件,修改 deploy
deploy:
  type: git
  repository: https://github.com/KevinSinL/Sin.gtihub.io/
  branch: master

文章撰写

网络上很多的教程,但是我这里还是推荐直接在有道云笔记上书写,导出 md 文件到\source\_posts 路径下面重新加载就好。

最终效果我的静态博客

一些错误

错误 方法
error deployer not found:git 执行: npm install hexo-deployer-git --save
FATAL can not read a block mapping entry; a multiline key may not be an implicit key at line 70, column 1: _config.yml中配置项的冒号后面要用空格

部署成功后缺少样式

分析问题:缺少样式,第一步直接F12,观察样式文件的路径,就可以发现路径与加载成功的页面不一样,这里的原因是由于 deploy 项没有配置好的原因。


如果觉得我的文章不错的话,可以关注一下我的微信公众号 搜索“ Fenmu”,或者扫一扫下面的二维码

Fenmu

猜你喜欢

转载自blog.csdn.net/mochi_li/article/details/84674642