基于github pages与hexo搭建一个独立博客

时间 2019-11-10

标签基于 github pages hexo 搭建一个独立博客栏目 Git 繁體版

原文原文链接

原文地址：http://lawlietfans.github.io/blog/2015/11/09/using-hexo-with-jekyll/html

介绍基于github pages搭建独立博客的博文已经有不少了，而本文旨在帮助读者了解基于github pages与hexo搭建一个独立博客的总体过程，顺便备忘。java

在开始动手操做以前，咱们应该了解node

1 什么是github page？为何要用hexo？

github Pages能够被认为是用户编写的、托管在github上的静态网页,GitHub Pages分两种，一种是你的GitHub用户名创建的username.github.io这样的用户&组织页（站），另外一种是依附项目的pages。即organization site和project site.
不过官方目前不建议用二级域名，咱们这里的例子也是属于organization site.git

至于hexo，快速、简洁且高效的博客框架，文档完善，主题丰富github

2 配置organization site

新增仓库：https://github.com/newnpm

Repository name：github帐号.github.io
  Description：随便输入点描述
  public
  Initialize this repository with a README
  .gitignore 选择初始的文件忽略，我选的java
  Licenses：我选的NPL（GNU General Public License v2.0）
  配置

选择右侧操做区的settingshexo

选择Launch automatic page generator
  输入一些基本说明，非必要
  选择Load README.md
  继续Continue to layouts
  选择模板（随便选个）
  发布Publish page
  此时进入settings应该会有Your site is published at http://username.github.io的条提示，访问一下，神奇吧！
  若是404，请检查你的仓库名或帐号名，删除仓库重来，删除也是在settings最底部

参考-详细框架

3 本地准备工做

安装git
安装Node.JSide

安装完成后添加Path环境变量，使npm命令生效。新版已经会自动配置Path  
;C:\Program Files\nodejs\node_modules\npm

安装Hexopost

npm install hexo-cli -g
npm install hexo --save

#若是命令没法运行，能够尝试更换taobao的npm源
npm install -g cnpm --registry=https://registry.npm.taobao.org
#新建文件夹<folder>
cd <folder>
hexo init 
npm install

运行

$ hexo g
$ hexo s

Git Bush或者Linux环境下terminal会提示输入http://0.0.0.0:4000 查看自带landspace主题效果

参考-详细

4 如何使用新主题，以Jekyll主题为例

hexo提供的更多主题提供了丰富的主题能够选择，安装方法大同小异，其中包括一款黑色背景的，好了，就它了。

安装插件

npm install --save hexo-renderer-jade hexo-generator-feed

clone该主题到<folder>/themes/jekyll文件夹

git clone https://github.com/pinggod/hexo-theme-jekyll.git themes/jekyll

修改<folder>/_config.yml的theme值

添加feed属性

复制Demo.md到source/_post文件夹

本地运行预览

配置deploy属性

deploy:
  type: git
  repository: 前面步骤在github建好的Repository的地址
  branch: master

发布到远程

hexo d

最后就能够在yourname.github.io看到效果了

我的以为不错的其余主题：

经常使用命令总结

hexo new "postName" # 新建文章
hexo new page "about" # 新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #将.deploy目录部署到GitHub
hexo clean # 有时候配置没有当即生效须要删除cache

5 修改这个主题

5.1 添加新文章

$ hexo new [layout] <title>

Layout包括：post、page 和 draft

Hexo 默认以标题作为文件名称:title.md：

$ hexo new test-2249
INFO  Created: e:\workspace\github\blog-github\source\_posts\test-2249.md

若是设为:year-:month-:day-:title.md

$ hexo new test-2247
INFO  Created: e:\workspace\github\blog-github\source\_posts\2015-11-07-test-224
7.md

二者都自动生成title和date，可是后者更便于管理。

5.2 修改主页

首先对比主页<foldername>/themes/jekyll/layout/index.jade:

extends _partial/layout

block content
    include _mixin/post
    +homePost()

block extra
    include _components/project
    include _components/selfintro

和归档页<foldername>/themes/jekyll/layout/archive.jade:

extends _partial/layout

    block content
        include _mixin/post
        +archivePost()
        aside.sidebar
            include _sidebar/tag
            include _sidebar/post

删掉index.jade中include _components/project这句就比较精简了。
主页样式变成一篇新文章+我的介绍，直接修改jekyll/_config.yml下selfIntro:部分并不能使人满意，这里直接修改/layout/_components/selfintro.jade

section.selfintro
    .wrap.row-flex.row-flex-row.limit-width
        .sign
            img(src="img/github.png", alt="")
        .intro
            if theme.selfIntro.title
                h3.title
                    != theme.selfIntro.title
            else 
                h3.title 超爽der
            if theme.selfIntro.content
                p.content 
                    != theme.selfIntro.content
            else 
                p.content 空空
            
            // 默认的href都为空，填上连接
            ul.contact
                li 
                    a(href="https://github.com/lawlietfans") GitHub
                li
                    a(href="http://weibo.com/lawlietfans") Weibo

接着再找一个合适的logo替换github.png就能够了（不用也行。。），logo背景透明才能和主题融合

see more: Jade Syntax Documentatio

Comments
// single line comment
//- invisible single line comment

5.3 修改头部导航

从这里/layout/_components/nav.jade添加修改menu

nav
        ul.nav-list
            li.nav-list-item
                a.nav-link(href= theme.menu['home'] class=is_home() ? 'active' : '')
                    = __('index.title')
            li.nav-list-item
                a.nav-link(href= theme.menu['blog'] class= is_archive() || is_post() ? 'active' : '')    
                    = __('archive.title')
            li.nav-list-item
                a.nav-link(href= theme.menu['rss'])
                    = __('rss.title')
            //li.nav-list-item
            //    a.nav-link(href= theme.menu['github'] target="_blank")    
            //        = __('github.title')

依我的口味酌情修改便可。除此以外，RSS插件安装以后本地预览是没效果的，通常部署以后过段时间才有效

5.4 侧边栏

layout/_sidebar/包含post.jade、tag.jade、和toc.jade三个部件，理论上均可以添加到archive.jade

extends _partial/layout

block content
    include _mixin/post
    +archivePost()
    aside.sidebar
        include _sidebar/tag
        include _sidebar/post

可是添加include _sidebar/toc以后会报错以下：

Unhandled rejection TypeError: e:\workspace\github\blog-github\themes\jekyll\lay
out\_sidebar\toc.jade:1
  > 1| if toc(page.content, {list_number: false})
    2|   h3 文章目录
    3|   != list_tags({amount: 5, show_count: false})
    4|

有待达人解决