GitHub Pages + Hexo 搭建个人博客超详细教程


工具

  • Git Account
  • Hexo
  • Typora

搭建框架

  • GitHub Pages

    GitHub Pages是什么:简单来说,GitHub Page是为GitHub Repository服务的,是为了更简明易懂的展示你在Github上所作的projects的网页,就如GitHub Pages官网所说--“Websites for you and your projects.”

    可能很多人还是不理解为什么要有GitHub Pages这样的一个东西...举个例子来说,你是一个新手,当你浏览Github上某一个大牛的代码时,你看到的是一大堆源码,你肯定没有心情深入的看下去(反正我最开始就是这样😂),那么GitHub Pages就可以允许用户自定义项目首页,用来替换默认的源码列表~因此小白你就可以看的更明白啦~

    一句话来说就是,GitHub Pages可以被认为是用户编写的、托管在Github上的静态网页。

  • Hexo

    为什么我们可以用Hexo?因为Github允许通过Github提供的模版站内生成网页,但是也允许用户自己编写网页然后上传,但这种上传并不一定是简单的上传,也可以通过Hexo、Jekyll等静态站点生成器的再处理

  • 此框架的优缺点:

    优点:

    1. 免费+无限流量

    2. 享受git的版本管理功能

    3. 你只要用自己喜欢的编辑器写作即可,其他事情都一概由Github处理

    缺点:

    1. 有一定技术门槛,你必须懂git和网页开发
    2. 它生成的是静态网站,添加动态功能必须使用外部服务
    3. 不适合大型网站,因为没有用到数据库

    --综合来看,它不失为搭建中小型Blog或项目主页的最佳选项之一


    <u>总结:你接下去要搭建的个人博客将是一个基于Hexo,托管在GitHub,写作用MarkDown的超高效率工具👊</u>

搭建步骤

  1. 使用GitHub Pages建站

    请按照官网首页的教程来进行设置,只需操作官网教程的前两步,也就是创建仓库和克隆仓库到本地

    • 创建仓库:新建的仓库的username.github.iousername一定与自己account的username一致
    • 克隆仓库:目的是为了让自己未来的博客和代码处在git管理之下,所以我们要把刚刚在Github上博客项目拉到本地,代码如下
    $ git clone https://github.com/username/username.github.io
    

    请自行替换你的username)

  2. 安装Hexo

    安装Hexo的步骤:

    1. 安装Git

    2. 安装Node.js,需要先安装nvm(Node.js版本管理器)

      官网教程在这里,但是官网通过curl安装nvm的命令已经失效,下面我介绍一下用Homebrew进行安装的方式:

      # 通过Homebrew安装nvm
      $ brew install nvm
      
      # 创建nvm的工作目录,为了可以让你直接在shell使用nvm指令
      $ mkdir ~/.nvm
      
      $ vi ~/.bash_profile
      # 在.bash_profile文件里添加以下两行
      # export NVM_DIR=~/.nvm
      # . $(brew --prefix nvm)/nvm.sh
      
      # source .bash_profile
      $ . ~/.bash_profile
      
      # 验证nvm是否已经安装
      $ nvm help
      
      # 因为我们是通过homebrew安装的,所以不需要像官网说的要重启terminal,执行以下命令来安装Node.js
      $ nvm install stable
      
    3. 安装Hexo

      $ npm install -g hexo-cli
      
  3. 编写博客,发布

    1. 创建博客

      $ hexo init username.github.io
      # 在从git克隆到本地的仓库的目录下初始化hexo,在我的电脑里就是cd ~
      
    2. 更改配置

      $ cd username.github.io
      $ git clone https://github.com/iissnan/hexo-theme-next themes/next
      

      这里安装的是主题Next(官方文档在这更多主题

      1. 进入username.github.io/_config.yml修改基础配置:(请确保每个字段都缩进一个空格,因为YAML依靠缩进来确定元素间的从属关系)
      title: Luke's Blog    //你博客的名字
      author: Luke  //你的名字
      language: zh-Hans    //语言 中文
      theme: next   //刚刚安装的主题名称
      deploy:
       type: git    //使用Git发布
       repo: git@github.com:username/username.github.io.git      
      

//刚刚在git创建的仓库,这里使用ssh不需要输入账户密码(前提是配置好了Github的ssh),使用https需要输入账户密码,我已经配置过了ssh,所以这里使用ssh
branch: master
```

   2. (optional)进入username.github.io/themes/next/`_config.yml`中修改主题配置文件(参见[官方文档](http://theme-next.iissnan.com/getting-started.html#theme-settings))

3. Markdown写文章

  将你写的文章存到username.github.io/source/_posts的目录下就OK了,Markdown编辑器推荐[Typora](https://typora.io/) - "Live Preview"

4. 在本地环境进行测试

   ```
   $ hexo s
   # 测试服务启动,在浏览器中输入http://localhost:4000进行访问
   ```

5. 安装[hexo-deployer-git](https://github.com/hexojs/hexo-deployer-git)自动部署发布工具

   ```
   $ npm install hexo-deployer-git --save
   ```

6. 发布

   ```
   $ hexo clean && hexo g && hexo d
   # hexo clean命令是为了清除缓存文件 (db.json) 和已生成的静态文件 (public)。

在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。

hexo g是为了生成静态文件,hexo d用于部署网站。

   ```

   <u>***以后每次写博客,只要重新进行三四五六步的操作就OK啦~***</u>
  1. 在浏览器中输入https://username.github.io,验收你的博客!

  2. 更多配置与插件,敬请期待😆

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,084评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,623评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,450评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,322评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,370评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,274评论 1 300
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,126评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,980评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,414评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,599评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,773评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,470评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,080评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,713评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,852评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,865评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,689评论 2 354

推荐阅读更多精彩内容