美文网首页前端开发那些事
搭建Hexo & GitHub踩过的坑

搭建Hexo & GitHub踩过的坑

作者: 苏日俪格 | 来源:发表于2018-08-22 14:29 被阅读1次

    ☞☞ 个人主页欢迎访问 ☜☜


    大家好,我叫苏日俪格,在网上看了好多5分钟/10分钟教你搭建博客,然而没想到的是前方一大堆坑等着你跳,相信许多人也都准备搭建一个属于自己的博客,当然这里已经说了是基于Hexo的,而且一切都是托管在GitHub上的,然后再使用 GitHub Pages 建立博客,下面开始吧:

    本文所有参考文档均放在文章底部


    一、Hexo是什么?

    Hexo官网点这里

    Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

    其实说白了就是将我们所熟悉的写博客文件的格式.md解析成了html,服务数据什么的官方已经帮助解决,我们再将其托管在GitHub Pages上,这样就可以实现完全免费构建博客,当然推荐爬梯,否则会很慢

    二、安装

    安装之前电脑中需要有 nodeJsgit ,接下来Git Bash Here:

    $ npm install -g hexo-cli
    

    接下来建站需要自己的GitHub Pages,没有的可以参考我的博客---关于GitHub

    三、建站

    1. 初始化

    hexo脚手架安装完之后,需要初始化一个博客的目录(ps:初始化目录可以自行创建也可以以下面这种方式创建):

    $ hexo init <folder>
    

    小坑:<>这个符号只是为了标明可自行更改,并不是一个格式;exp:hexo init blog

    2. 安装依赖包

    进入刚刚初始化目录,安装...

    $ cd <folder>
    $ npm install
    

    安装完成之后目录结构是这样的:

    .
    ├── _config.yml                // 整个网站信息的配置文件
    ├── package.json               // 依赖包文件的配置
    ├── scaffolds                  // 新建文章时通过它建立文件
    ├── source                     // 原文件目录
    |   ├── _drafts
    |   └── _posts
    └── themes                     // 主题目录
    

    有的人安装完之后没有_drafts,没关系的,没有会把我们的所有源文件解析放在 public 文件夹下

    3. 启动服务

    $ hexo server 或者 $ hexo s
    

    看到INFO Start processing INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.即为成功,直接访问即可:

    四、配置

    虽然能用了,但这都是官网默认的东西,需要通过文件 _config.yml 改成自己的:

    • 这里有很多项,具体都是干什么的可以参照网站配置项
    • 每一项的键值对都必须以空格隔开,exp:key: value
    • 这里的语言类型大可不必写,因为都是官方的标准写法,自己写容易出错,还有就是timezone,默认参照的是我们使用的电脑的时区,强迫症可具体查看时区列表

    如果这里没有采用官方写法就会跳进坑里,后期提交新的文章会报错:TypeError: Cannot read property 'utcOffset' of null

    下面是我的配置:

    基础配置 主题配置

    theme 是我自己下载的主题,更多主题在这里

    托管

    deploy 这个配置项是将我们的文件托管,请看第五步☟:

    五、创建一个新的仓库

    GitHub Desktop或者GitHub官网上创建一个名字为:<你的GitHub账户名>.github.io的仓库;
    下面这个是我的:

    六、发表文章

    此过程依次参照下面几步:

    $ hexo new <title>      // title 就是要发表的文章名
    $ hexo generate 或者 $ hexo g        // 生成静态文件
    $ hexo server          // 启动服务
    

    在写文章的时候如果不会写markdown文件的时候可以参考我的博客:markdown编写

    如果不想在简书上编写的话,可以用编写markdown文件的编辑器,下载地址:http://markdownpad.com/download.html

    在我把简书上的文章复制过去的时候,又遇到了一个小坑,h1~h6标题必须在#后面加个空格,否则不生效

    之后若在想修改博客里面的内容的时候,就一定要先清缓存,否则改了之后访问有的时候不会变

    $ hexo clean        // 清除缓存文件 (db.json) 和已生成的静态文件 (public)
    

    七、部署

    在所有东西都弄完之后,访问确实没问题,然后将其托管在GitHub上:

    $ hexo deploy 或者 $ hexo d          // 将网站部署到服务器上
    

    部署好了会出现这个:

    大功告成,然后在网上就可以直接通过GitHub Pages访问了:

    参考☟☟☟:
    如何搭建个人独立博客?
    笨方法学写作个人网站
    https://zhuanlan.zhihu.com/p/25729240
    Hexo官网文档
    小歪的博客


    本文的所有内容均是一字一句敲上去的,希望大家阅读完本文可以有所收获,因为能力有限,掌握的知识也是不够全面,欢迎大家提出来一起分享!谢谢O(∩_∩)O~

    欢迎访问我的GitHub,喜欢的可以star,项目随意fork,支持转载但要下标注
    欢迎光临个人主页

    等一下( •́ .̫ •̀ ),我还有最后一句话:
    我爱你,
    又很遗憾没人能证明,
    可这份爱已经如鲸向海,
    如鸟投林,
    无可避免,
    退无可退了,
    再见...

    相关文章

      网友评论

        本文标题:搭建Hexo & GitHub踩过的坑

        本文链接:https://www.haomeiwen.com/subject/layeiftx.html