专栏首页前端之旅折腾博客系列之博客搭建:Hexo+Github pages

折腾博客系列之博客搭建:Hexo+Github pages

初衷:之前我习惯用印象笔记进行知识的收集和整理,虽然很好用,但终归只适合输入而不适合输出。我需要的是一个更加开放的平台,在这上面可以输出: 1.学习的收获 ;2.生活的感想 ;3.有价值的分享,因此有了这个博客网站。

用hexo+github pages 可以很方便地搭建一个个人博客网站,不需要购买域名和服务器,只需要按部就班操作即可。我自己大概是花了两三个小时搞定,主要是因为对git bash的使用不够熟悉,因此走了一些弯路。实际上动作快的话半个小时就可以搞定。下面是对部署过程的大概介绍,以及必须注意的事项(划重点,也就是所谓的“坑”)。由于本文参考了大量博客,所以在文末我会列出原文链接。

一.Github,Github pages ,Hexo

首先介绍一下这三个东西,有大概的了解、知道是什么东西就可以。GitHub是一个面向开源及私有软件项目的托管平台,而GIthub Pages则是github的一项功能,可以放置网页文件到指定文件夹,然后给你一个专属域名用于展示一些项目,现在大多用来开发和制作个人博客网站。它的好处在于域名和服务器都是免费提供的,并且没有网站数量的限制。而Hexo 是一个快速、简洁且高效的博客框架,它使用Markdown解析文章,在几秒内,就可以利用靓丽的主题生成静态网页。(关于Hexo的详细介绍,请看官方文档 https://hexo.io/zh-cn/docs/ ,这里就不展开了)。因此,可以说github和hexo是绝配。接下来,开始我们的工作。

二. 环境和必要准备

我个人的环境:win10,64bit 必要准备:你需要 (1)github账号 :前往https://github.com/ 官网注册就好 (2)git : 最新版本的git(本文发表的时候是2.20.1版本),前往https://git-scm.com/ 官网下载并安装。安装完后前往git文件夹下打开git bash,运行以下命令:

git config --global user.name "username"
git config --global user.email "your mail"

注:将username替换为自己的github账号名,将your mail替换为自己注册github时绑定的邮箱。这一步非常重要,当时部署的时候我因为遗漏了这一步,导致后面报错.

(3)node.js : 前往 https://nodejs.org/en/ 下载并安装。 这两个的安装比较简单,一路next就好,不过我推荐还是修改一下路径,尽量放在自己可以找到的位置。 (4)hexo :打开git文件夹下的git bash,运行 以下命令安装hexo

npm install -g hexo-cli

依次运行以下命令进行hexo的初始化

$ hexo init <folder>
$ cd <folder>
$ npm install

注:请将上面代码的<folder>替换成你自己想要的文件夹名字,以我为例,我想要在git文件夹下新建一个Myblog文件夹以存放站点文件,那么我这里的代码就应该是

$ hexo init Myblog
$ cd  Myblog
$ npm install

成功之后,我们会在git文件夹下看到新建的Myblog文件夹,这个就是我们的站点文件夹,网站相关文件都存放在这里。 这里顺便介绍一下cd Myblog的作用,可以理解为“进入Myblog运行git bash”,你也可以在Myblog中右键运行git bash(如下图),效果是一样的。

在之后介绍的操作中,凡是需要输入命令的,请确保你已经cd进自己的站点文件夹。

接着上面的代码,我们继续运行:

hexo server

这将在本地打开我们的网站,当提示”xxx is running at xxx“的时候,我们可以通过网址预览我们的网站,想要切断连接,只需要在命令行窗口按下ctrl+c。至此,hexo博客已经在本地搭建好了。接下来,我们要将hexo和github进行对接。

三. hexo与github 实现对接

1.建立仓库

还记得我们之前注册的github账号吗?现在,请进入github网站,并点击头像选择your repository,我们现在需要创建一个仓库(也就是repository)用于存放相关站点文件。按照下图顺序进行设置:

其中,Repository name也即是我们的仓库名字,必须是 Github账号名称.github.io的格式。比如你的github名字是ccc,那么仓库名字必须是ccc.github.io 。

2.对接github 在git bash中运行以下命令,安装 hexo-deployer-git 插件。

npm install hexo-deployer-git --save

运行以下命令,创建SSH key。(注:和上面一样,请将your mail替换成github邮箱地址)

$ ssh-keygen -t rsa -C "your mail"

前往 C:\Users\Administrator.ssh\id_rsa.pub (注意,这只是大概位置。不同系统路径可能不同,但是大同小异)打开id_rsa.pub文件(可以用记事本打开,但是推荐用sublime text)。复制文件中的全部内容,前往 https://github.com/settings/keys ,将刚才复制的内容粘贴在New SSH key 的文本框中。

前往站点目录下(例如:git/ Myblog),打开_config.yml 文件,对文件末尾进行如下修改:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
    type: git
    repo: git@github.com:username/username.github.io.git
    branch: master

在这里要注意,1)所有的冒号距离右边的内容之间都有一个空格,如果没有空格,则修改是无效的。2)和前面一样,将usename替换成我们自己的github用户名 。 3)repo后面的地址,在旧版本的hexo中是http地址,但在新版本的hexo用的是ssh地址,我们统一用如上所示的ssh地址。有些博客由于没有进行更新,在说明这个问题的时候依然用的是http地址,造成了一定程度上的误导。

运行以下命令,对接并推送内容到github。

$ hexo g
$ hexo d

等待片刻,打开 https://<Github账号名称>.github.io (例如 https://ccc.github.io ) 即可进入你搭建好的个人博客网站了。当然,网站默认用的是landscape主题,比较难看,关于主题的美化和后期一些插件的添加,可以参考文章末尾贴出的链接。

PS:

这里顺便介绍一下常用的 hexo 命令: hexo clean ————————>清除缓存文件和已生成的静态文件 hexo g 或者 hexo generate ————————>生成静态文件 hexo d 或者hexo deploy ————————>生成静态文件并部署到仓库 hexo s 或者 hexo server —————————>在本地打开网站

一般来说,在对网站进行修改后,我们可以先用hexo g和hexo s 在本地预览效果,如果效果符合预期的话再用hexo d 推送到 github。当然,可能会遇到本地打开和域名打开的效果不一致,这种情况下通常是因为 1. 没有用hexo clean 清除缓存 2. 没有清除浏览器缓存(ctrl+f5 ) 3.忘记用hexo d 将本地文件推送到github 4. 本地和线上的同步本身需要时间,所以上述方法如果无效,可以尝试等几分钟,再打开网站就正常显示了。

参考自: https://www.jianshu.com/p/3a05351a37dc https://www.simon96.online/2018/10/12/hexo-tutorial/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用 Vue 脚手架搭建项目

    vue-cli 也是一个 npm 包,可以帮助我们快速搭建起 vue 项目的脚手架。

    Chor
  • hexo 中文文章渲染错误的bug解决

    这实际上是在很长一段时间内困扰我的一个 bug,在 hexo s 本地查看 markdown 文章后,会偶发性地出现部分文章渲染错误的情况,

    Chor
  • 数据类型判断

    typeof 操作符返回一个表示数据类型的字符串,它可以应付常规场景下的数据类型判断。对基本数据类型 undefined, boolean, string, n...

    Chor
  • Hexo

    动因 新学期开始了,这个学期准备养成开始写博客的好习惯。以前什么东西都是在QQ空间里, 后来觉得技术性稍微强一点的就是CSDN和博客园。但是啊我觉得他们的广告和...

    lwen
  • 折腾git pages+hexo+NexT初识hexo开始本地试运行准备服务器准备上传工具先告一段落发表文章主题

    孙亖
  • Hexo安装配置并托管至github

    1.1从官网或者上边提供的百度网盘下载Git安装包,由于众所周知的原因,官网下载十分缓慢。下载完安装即可,中间会让你选择默认编辑器,如果不习惯Vim推荐Note...

    C4rpeDime
  • hexo+github 搭建个人技术博客

    LinXunFeng
  • Linux下使用 github+hexo 搭建个人博客07-next主题接入搜索和站点管理

    这是搭建个人博客系统系列文章的最后一篇,如果你是从第一篇一路跟下来的,那么恭喜你,即将完成整个博客网站的搭建。OK,话不多说,开始我们的收官之战。

    踏歌行
  • Mac下体验Hexo与Github Pages搭建

    很久之前就知道Github可以发布自己的博客,因为仅支持静态文件,一直懒于动手自己进行编辑。再了解到还存在 JekyII 和 Hexo 这样的内容生成框架后,终...

    大江小浪
  • Mac搭建Hexo博客流程记录,排雷完成

    经过一天的辛苦作战,总算基础的东西出来了。踩了太多的坑,综合我踩坑的经过,明白到,选好一篇引导文很重要!有些步骤不要先做了,不然后面你都不知道怎么死的..

    Jingbin

扫码关注云+社区

领取腾讯云代金券