个人博客的创建-使用详解

关于如何创建属于自己的博客呢?其实在今日之前,我也不清楚!

说来惭愧,作为一名有三年前端经验的开发者来说不会这个确实有点尴尬 ~ 今天得亏隔壁前端大佬在更新博客,于是乎我就跟着操作了一遍,这里呢,做个学习记录,也算做是我的个人博客第一篇内容了!!! 下面直接捞干货:

一、什么是Hexo?

Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Heroku上,是搭建博客的首选框架。这里我们选用的是GitHub,Hexo同时也是GitHub上的开源项目.

二、环境安装

  1. 安装 node 跟 npm(开发电脑基本都会有配置,如不会烦请百度!)
  2. 安装 hexo
    1
    cnpm install -g hexo-cli
  3. 安装后验证hexo
    1
    hexo -v
  4. 使用 hexo 搭建 blog
    (1).创建一个空白 dir, 并进入到该 dir, 比如
    1
    zx-hexo
    (2).在 zx-hexo 目录下, 初始化 blog
    1
    hexo init
    (3).本地启动 blog, 主要是本地预览文章用 (按下 ctrl+c 即可停止)
    1
    hexo s
    (4).使用下述网址即可访问本地部署的 hexo 博客
    1
    http://localhost:4000
    (5).在 zx-hexo 目录下, 安装上传图片到 github 的插件
    1
    cnpm install https://github.com/CodeFalling/hexo-asset-image --save
    (6).同时修改 zx-hexo 目录下, _config.yml文件配置
    1
    post_asset_folder:true
    (7). 其中hexo clean:清理目录 hexo g:重新生成 hexo s: 再次启动,预览即可看到
    (8). 如果要用到其他的主题,可以在hexo官网的主题中挑选合适的主题使用,具体使用步骤根据主题配置说明走就可以了https://hexo.io/themes/

三、更换主题

  1. 假设要更换的主题是 maupassant
    1
    https://www.haomwei.com/technology/maupassant-hexo.html
  2. 在 zx-hexo 目录下, 依次执行命令:
    1
    2
    3
    git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
    cnpm install hexo-renderer-pug --save
    cnpm install hexo-renderer-sass --save
  3. 编辑 zx-hexo 目录下的 _config.yml 文件, 将theme的值改为maupassant
    1
    theme: maupassant
  4. 依次执行命令
    1
    2
    3
    hexo clean
    hexo g
    hexo d

四、将hexo放到github仓库上

​ 完成了hexo的安装后, 我们只能在本地访问. 因此我们将它放到github上, 方便我们随时随地的用网址访问。

  1. Blog文件夹目录下输入: cnpm install –save hexo-deployer-git 用来安装git部署的插件
  2. GitHub上去建一个repository. 注意名字只能是” github账户名.github.io “.
  3. 置_config.yml. 在Blog目录下找到_config.yml使用vscode或者sublime等编辑器打开.按照如下配置Deployment:
    1
    2
    3
    4
    deploy:
    type: git
    repo: https://github.com/wowangmouren/wowangmouren.github.io
    branch: master
  4. 输入: hexo d 来将hexo部署到github. 中途会让你输入你的github用户名和密码. 输入就行.
  5. 成功后就可以在浏览器输入github用户名.github.io来进入自己的博客了.