Hexo Tutorial 入门设置

Hexo Tutorial 入门设置

前言

2020年的新年真的亲身感受了渡日如“年”。在家憋了5天之后,任凭怎么下拉刷新也刷不出各个社交平台的新内容了🤣 既然闲着也是闲着,不如从头搭建一个静态个人博客吧!这里选择Hexo作为构建静态博客的框架来搭建。之前也尝试过Jekyll,但是感觉社区还有皮肤都没有Hexo丰富,不如就推倒重新搭建一套。

在尝试Hexo的搭建也踩了一些坑,这里也同时分享一下解决办法给大家参考一下😀

环境配置

这里我主要以我个人的环境来作为说明:

1
2
3
MacOS
NodeJS Version: v12.14.1
npm Version: 6.13.6

因为Hexo是基于Nodejs开发的,所以还需要配置如下环境才能正确运行:

  1. Nodejs
  2. npm

在这里强烈推荐大家使用NVM(Node version manager)来安装Node环境,方便之后的插件安装和管理。
安装方式大家可以参考 这篇文章

安装好了Node和npm我们的环境准备工作就结束了下面就是Hexo的安装。

💿安装&配置Hexo

首先打开大家各自熟悉的命令行软件,直接在命令行里面敲下面的命令

1
$ npm install -g hexo-cli

这里在国内安装的话,因为众所周知的原因安装时间可能会非常长。这里可以把npm的源替换为taobao的国内源。

1
$ npm install -g mirror-config-china --registry=http://registry.npm.taobao.org

这个时候有可能会遇到报错,这个是因为npm没有root权限所导致。
这里再次推荐大家参考 这篇文章 避免遇到这个问题

等在命令行安装完成Hexo-cli之后我们就可以真正开始初始化一个Hexo博客项目了。

  1. 首先在命令行定位到你想要Hexo文件保存的文件夹地址
    1
    $ cd YourProject Folder
  2. 初始化Hexo:
    1
    $ hexo init yourusername.github.io (yourusername替换为你的GitHub账号名)

这里如果在国内的话会再次遇到等待时间长的问题,这是因为众所周知的原因导致github连接速度限流了。

  1. 进入仓库目录,安装依赖包

    1
    2
    $ cd yourusername.github.io
    $ npm install
  2. 到这一步,hexo的框架的准备工作就已经做完了。如果现在想要新建一篇文章,输入如下命令

    1
    $ hexo new "New Page" //(文件会保存在source/_posts目录下,之后可以直接访问目录下的文章进行编辑)
  3. 生成页面并本地预览你的博客:

    1
    2
    $ hexo g
    $ hexo s

到这里崭新的博客网站已经生成成功,大家打开浏览器输入 localhost:4000 就可以预览你的博客了。
Hexo还提供了非常多主题可以选择,这里大家可以到 这里 挑选自己喜欢的主题下载安装。
更换主题这里还有其他非常多的坑,这里也是搞了两天才让主题正确的运行起来。这些开源主题很多也是疏于更新,又加上网速实在感人,很多时候得直接从Github上面下载压缩包解压文件。但是这些主题在编写的时候还需要其他Hexo控件作为依赖包,这些还得不断调试浪费的很多时间。看来还是要学习一点前端的知识,之后如果想开发自己的主题的话也可以用得上。

发布到GitHub Pages

在本地编辑完毕想要的内容之后就可以吧内容发布到GitHub Pages来作为个人网站了。

  1. 首先需要安装 hexo-deployer-git 来帮助快捷发布
    1
    $ npm install hexo-deployer-git --save
  2. 现在配置_config.yml文件,把yourusername替换为GitHub的用户名
    1
    2
    3
    4
    deploy:
    type: 'git'
    repo: git@github.com:yourusername/yourusername.github.io.git
    branch: master
  3. 最后清理项目,构建并发布
    1
    2
    3
    $ hexo clean
    $ hexo g
    $ hexo d

这里如果配置正确的话,基于Hexo的博客就已经生成了。现在可以到yourusername.github.io查看最终的效果了。

参考资料

在这个过程中还是参考了很多网上的资料,这篇文章还是帮助比较大也比较详细的,可供参考。

unsplash-logoLauren Mancke

You forgot to set the qrcode for Alipay. Please set it in _config.yml.
You forgot to set the qrcode for Wechat. Please set it in _config.yml.
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×