使用Github Pages和Hexo构建个人博客

简介: Github Pages可以创建免费的静态站点,支持自带主题、支持自制页面等,并且可以使用Jekyll或者Hexo等静态博客框架进行管理。 独立博客是博客园等博客平台之外的一个良好补充,相比使用虚拟主机或者云服务器搭建站点,静态博客管理和使用简洁,使用Github Pages搭建博客不失为一个好选择。

Github Pages可以创建免费的静态站点,支持自带主题、支持自制页面等,并且可以使用Jekyll或者Hexo等静态博客框架进行管理。 独立博客是博客园等博客平台之外的一个良好补充,相比使用虚拟主机或者云服务器搭建站点,静态博客管理和使用简洁,使用Github Pages搭建博客不失为一个好选择。

使用Github很快就可以搭建一个站点,可以分为以下几步:

  • 在Github创建对应仓库

  • 配置Jekyll或者Hexo环境

  • 设置主题,安装评论等插件

 

一、使用Github创建站点

1.创建一个新的仓库

创建Github Pages比较简单,只要在Github创建一个仓库就可以,这个仓库命名需要遵循一定规则,其格式必须为:yourusername.github.io。

现在新建一个repository,名称设置为bingyue.github.io。

2.添加一个页面

Github Pages支持使用master分支或者gh-pages分支,如果是某个仓库的wiki页面,需要设置文档到gh-pages 分支中,个人站点使用默认的master分支就可以。

把工程Clone 到本地,在根目录创建一个index.html

1
2
3
4
5
6
7
<! DOCTYPE  html>
< html >
< body >
< h1 >Hello World</ h1 >
< p >I'm hosted with GitHub Pages.</ p >
</ body >
</ html >

 

3.发布并预览站点

提交新建的页面,push到远程仓库,然后访问你的站点地址就可以预览了。

 

4.设置默认主题等

在Repository的设置页面,可以配置域名,更改默认的主题等。

 

二、使用静态博客框架管理站点

Gitpages支持使用Jekyll或者Hexo等静态博客框架进行管理,与github pages绑定,可以编辑博文,生成静态博客等。

1.选择jekyll还是hexo

目前主流的静态博客框架是Jekyll和Hexo, Jekyll基于Ruby实现,安装Jekyll需要搭建Ruby环境,Hexo基于Node.Js实现。 这两个静态程序功能基本类似,两个程序都有博文预览功能,可以在本地启动服务,默认都使用Markdown语法,另外Jekyll是Github推荐的管理程序。

实际应用中,我第一次安装的是Jekyll,在Mac环境下配置中发现Ruby安装繁琐,配置Jekyll主题等需要对Ruby的基本应用有些了解,比如Gemfile/Rails等的作用,看了一下论坛的吐槽,如果是Windows环境可能会更加棘手。相比之下,Node.Js在类Uinx系统和Windows系统下的安装和应用都比较简单,开发同学也会比较熟悉JavaScript 。

除非对Ruby比较熟悉,推荐大家使用Hexo进行站点管理。

2.安装Hexo环境

这里跳过了安装Node环境的步骤。

使用下面的命令安装Hexo:

1
sudo  npm  install  -g hexo-cli

查看是否安装:

1
hexo version

初始化工程目录:

1
hexo init <yourFolder>

一些常用命令:

1
2
3
4
5
6
hexo new  "postName"  #新建文章
hexo new page  "pageName"  #新建页面
hexo generate  #生成静态页面至public目录
hexo server  #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy  #将.deploy目录部署到GitHub
hexo help  #查看帮助

  

3.发表一篇文章

1
hexo new  "第一篇文章"

会提示相应的输出:

INFO Created: ~/Work/bingyue.github.io/source/_posts/第一篇文章.md

接下来编辑这篇文章:

1
2
3
4
5
6
7
---
title: 第一篇文章
date : 2017-03-08 11:28:45
tags:
---
 
欢迎来到我的博客!

  

然后发布博客,进行本地预览:

1
hexo server

  

4.配置你的Hexo

Hexo默认会读取根目录的config.yml获得站点信息,另外在themes/landscape中也有一份config.yml文件,配置的是站点的主题和一些个人设置。

新建一个_config.yml,更改Title等站点信息,可以参考这份说明:

复制代码
# Site
title: 邴越的博客 #标题
subtitle: 纸上得来终觉浅 #副标题
description: 邴越 博客 架构 写作 #描述
author: 邴越 #作者
language: zh-CN #语言
timezone:  Asia/Shanghai #时区

# URL 
url: https://bingyue.github.io/   #网址
root: / #网站根目录
permalink: :year/:month/:day/:title/ #文章的永久链接格式
permalink_defaults: #永久链接中各部分的默认值 

# Directory
source_dir: source #源文件,存放内容
public_dir: public #公共文件夹,存放生成的站点文件
tag_dir: tags #标签文件夹
archive_dir: archives #归档文件夹
category_dir: categories #分类文件夹
code_dir: downloads/code
i18n_dir: :lang #国际化
skip_render:

# Writing
new_post_name: :title.md #新文章标题
default_layout: post #默认模板(post page photo draft)
titlecase: false #标题转换成大写
external_link: true #新标签页里打开连接
filename_case: 0 #把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight: #语法高亮
  enable: true
  line_number: true #显示行号
  auto_detect: true
  tab_replace:

# Category & Tag
default_category: uncategorized #默认分类
category_map:
tag_map:

# Date / Time format
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination 
per_page: 10 #每页文章数, 设置成 0 禁用分页
pagination_dir: page #分页目录
复制代码

 

具体的配置可以查看这个说明:https://hexo.io/zh-cn/docs/configuration.html

截止目前,我们所做的修改都是在本地,并没有推送到远程仓库,接下来怎么让其他人看到我们发布的博客呢?

 

5.关联Hexo与Github

(1)安装扩展

需要安装hexo-deployer-git扩展:

1
npm  install  hexo-deployer-git --save

  

(2)修改_config.yml文件

添加类似如下的部署配置:

1
2
3
4
deploy:
   type : git
   repo: git@github.com:bingyue /bingyue .github.io.git
   branch: master

  

执行

1
2
3
hexo clean 
hexo gegerate
hexo deploy

  

这时候你再查看,会发现相关的文件已经被push到对应的git分支上。

重新访问https://bingyue.github.io,会发现已经更新为新的主题。

 

 

三、更改博客主题,设置评论插件等

1.选择主题

以安装Next主题为例, 从Next的Gihub仓库中获取最新版本:

1
2
cd  your-hexo-site
git clone https: //github .com /iissnan/hexo-theme-next  themes /next

  

打开_config.yml做如下修改:

1
2
3
4
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next

  

2.配置评论插件

Hexo默认使用的评论插件是Disqus,Disqus在国内可能不太稳定,这里配置使用多说的评论框,具体参考多说文档

在_config.yml中添加多说的配置:

1
duoshuo_shortname: 站点的short_name

这里的short_name可能会让人困惑,这是你注册多说账户时的二级域名,多说二级域名是指你注册多说时,填写的abc.duoshuo.com中的abc部分。 

多说作为一个社会化评论系统,是有自己管理后台的,需要进行开发者注册,点进这个注册页面你就知道了:http://duoshuo.com/create-site/

接下来修改themes\landscape\layout_partial\article.ejs模板,替换下面的文件

1
2
3
4
5
6
7
<%  if  (!index && post.comments && config.disqus_shortname){ %>
  <section  id = "comments" >
    <div  id = "disqus_thread" >
      <noscript>Please  enable  JavaScript to view the <a href= "//disqus.com/?ref_noscript" >comments powered by Disqus.< /a >< /noscript >
    < /div >
  < /section >
  <% } %>

  

改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%  if  (!index && post.comments && config.duoshuo_shortname){ %>
   <section  id = "comments" >
     <!-- 多说评论框 start -->
     <div class= "ds-thread"  data-thread-key= "<%= post.layout %>-<%= post.slug %>"  data-title= "<%= post.title %>"  data-url= "<%= page.permalink %>" >< /div >
     <!-- 多说评论框 end -->
     <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
     <script  type = "text/javascript" >
     var duoshuoQuery = {short_name: '<%= config.duoshuo_shortname %>' };
       ( function () {
         var ds = document.createElement( 'script' );
         ds. type  'text/javascript' ;ds.async =  true ;
         ds.src = (document.location.protocol ==  'https:'  'https:'  'http:' ) +  '//static.duoshuo.com/embed.js' ;
         ds.charset =  'UTF-8' ;
         (document.getElementsByTagName( 'head' )[0]
          || document.getElementsByTagName( 'body' )[0]).appendChild(ds);
       })();
       < /script >
     <!-- 多说公共JS代码 end -->
   < /section >
   <% } %>

 

重新发布站点,点开一篇文章看到评论框已经加载成功。



目录
相关文章
|
6月前
|
存储 JavaScript 网络架构
【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床
【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床
284 3
|
6月前
|
Shell 网络安全 开发工具
Github Pages + Jekyll 独立博客一小时快速搭建&上线指南
Github Pages + Jekyll 独立博客一小时快速搭建&上线指南
|
10天前
|
JSON 缓存 JavaScript
使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)
使用 jsDelivr 加速 GitHub Pages 的图片资源和动态编译的 JSON 资源。
13 2
|
2月前
|
网络协议 开发工具 git
hexo github部署,通过域名访问你的博客
本文介绍了如何使用Hexo命令部署博客到GitHub,并详细说明了如何通过自定义域名访问GitHub上部署的博客。
hexo github部署,通过域名访问你的博客
|
26天前
为什么 GitHub Pages 的文章标题不能以 @ 开头?
本文记录了一个 GitHub Pages 博客网页上文章标题以 `@` 开头导致的问题,并分析了原因,提供了解决方法。
41 0
|
3月前
GitHub——使用GitHub Pages生成在线文档
GitHub——使用GitHub Pages生成在线文档
23 0
|
5月前
|
Web App开发 缓存 移动开发
四万字符数带你使用 Vitepress 构建博客并部署到 github 平台
四万字符数带你使用 Vitepress 构建博客并部署到 github 平台 最近写了好多篇 Chrome 浏览器插件相关的文章,有十几二十篇,就想着构建个博客,用来放置相应的文章。 正好前段时间看到 VitePress 1.0.0 发布了,而且是用 markdown 写文章,正好写插件文章的时候文章都是 md 格式,所有用下这个然后顺便写一篇使用教程。 Chrome 插件开发博客地址:https://18055975947.github.io/extension/
68 0
|
6月前
|
JavaScript 网络安全 开发工具
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
|
5月前
VitePress 构建的博客如何部署到 github 平台?
VitePress 构建的博客如何部署到 github 平台?
87 0
|
6月前
|
存储 前端开发 JavaScript
基于 GitHub Workflow和 Docker 构建 NextJS
基于 GitHub Workflow和 Docker 构建 NextJS
133 0