备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

Github Pages + Hexo搭建个人博客

2018-04-20 2388
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Github Pages + Hexo搭建个人博客  之前在简书上写东西，觉得自己还是太浮躁。本来打算用Flask自己写一个，以为是微框架就比较简单，naive。

Github Pages + Hexo搭建个人博客 


之前在简书上写东西，觉得自己还是太浮躁。本来打算用Flask自己写一个，以为是微框架就比较简单，naive。HTML、CSS、JS等都要学啊，我几乎没有这方面的基础，写到Web表单那儿果断弃了，转向简单的Hexo + Github Pages。不过要想搭建博客的同时巩固Python，Flask确实是一个不错的选择。

获取Github Pages

  1. 去Github官网注册账号

  2. 新建一个repo，注意名称一定是your_username.github.io这样的格式。

    比如你的用户名为zhangsan，Repository name里面就填上zhangsan.github.io

  3. 进入刚新建的仓库，点击Setting，一直拖到最下面，选择Automatic Page Generator，随便选个主题然后发布即可。

详细步骤见这个博客

Hexo搭建静态博客

hexo是一款基于Node.js的静态博客框架，Github官方推荐的是Jekyll。对比了下，大多认为hexo比较简单，于是我选择了它。我们需要安装如下软件

配置SSH

使用Github for windows首次登录时就自动在本地生成了密钥，并远程添加到了Github。自动配置好SSH还是很省事的。

安装hexo

详细步骤见iHTCboy的简书以及岁月如歌的博客。我是跟着他们写的一步步来的，别人说的很详细的我也没必要再重复。我粗略写下来只是为了记录个人学习过程。

打开Git Shell，cd到你想搭建博客的路径，比如D:\My Documents\GitHub\blog。依次输入

npm install hexo-cli -g  #安装hexo
hexo init                # 初始化，安装所需包
npm install              # 其实此句不是必须，新版本的Hexo在初始化时就安装好了依赖包)
hexo g                   # 生成
hexo s                   # 运行

然后在浏览器输入localhost:4000就能在本地预览我们新搭建的博客了。hexo的常用指令不多，主要如下

hexo n          # 新建文章，在\source\_posts文件夹里
hexo new page   # 新建页面，比如想在导航栏新增一个“关于我”的页面
hexo clean      # 清除本地的数据库和生成的public文件夹
hexo g          # 生成博客文件
hexo s          # 运行在本地浏览器，可当预览使用
hexo d          # 部署博客到Github等

注意所有命令需要在cd后的新路径中进行

新建文章

键入hexo n "name"即可在\source\_posts文件夹里生成name.md的Markdown文件，文件结构如下

---
title: HelloWorld！ # 文章页面上的显示名称，可以任意修改，不会出现在URL中
date: 2015-11-09 15:56:26 # 文章生成时间，一般不改
categories:   # 文章分类目录，参数可省略
    - 随笔 # 此为一级目录
    - 瞬间 # 此为二级目录
    - 关于 # 此为三级目录
tags:   # 文章标签，参数可省略
    - hexo
    - blog # 个数不限，单个可直接跟在tags后面
---
这里开始是正文

如果想生成的文件默认带categories，那么打开根目录下\scaffolds\post.md新增一行categories :就修改好了模板文件。如果想在主页中以摘要形式显示你的文章，要么正文中加入``即可屏蔽该语句下面的内容。

部署到Github Pages

在根目录下_config.yml里面任意位置新增以下语句

deploy:
  type: git
  # 填上你自己的仓库名，注意后面有`.git`
  repository: git@github.com:your_username/your_username.github.io.git 
  branch: master

  • 最好不要采用http形式的如https://github.com/your_username/your_username.github.io.git而采用SSH换版本的git@github.com:your_username/your_username.github.io.git，如下图点击Use SSH后再复制。

  • 所有冒号后面必须键入一个空格

好了现在可以部署到Github了。输入npm install hexo-deployer-git --save，然后再执行hexo d来部署。否则会出现Deployer not found:git的错误。耐心等待，出现Deployer done: git表示你部署成功了！输入网址your_username.github.io去看看吧。一般来说如果出现莫名的问题，按照以下步骤即可解决。

  1. 删除.deploy_git文件夹
  2. hexo clean
  3. hexo g
  4. hexo d

个性化你的博客

全局配置

在根目录_config.yml里进行全局配置。

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 海之声 #主页标题
subtitle: 参差多态乃是幸福本源 #副标题
description: 参差多态乃是幸福本源 # 网站描述，可以加一句自己喜欢的座右铭
author: haiyusun #作者，左下角显示
avatar: /images/avatar.jpg #设置头像，放在\themes\next\source\images里
language: zh-Hans # 选择中文简体
timezone:
since: 2016 #建站日期，左下角显示

# 多说 ShortName
duoshuo_shortname: your_username # 多说评论，后面填写用户名
# 百度分析
baidu_analytics: your_id # 填写自己获得的id

# Social links
social:
  Github: https://github.com/haiyusun
  Email: mailto:haiyu19931121@163.com

# title, chinese available
links_title: 友情链接
# links
links:
  我的简书: http://www.jianshu.com/users/4943cb2c6ea4

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://haiyusun.github.io/ #填自己的github pages网址
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# 本地搜索
search:
  path: search.xml
  field: post

# 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 # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
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
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
# 百度网站地图
plugins:
baidusitemap: # 需要安装插件 npm install hexo-generator-baidu-sitemap@0.1.1 --save
  path: baidusitemap.xml

# 主题切换
theme: next
# RSS订阅
feed:
  type: atom
  path: atom.xml
  limit: 0

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

# ---------------下面选项需要对应插件的支持---------------
# npm install hexo-generator-index --save
# npm install hexo-generator-archive --save
# npm install hexo-generator-category --save
# npm install hexo-generator-tag --save

index_generator:
  per_page: 10 ##首页默认10篇文章标题 如果值为0不分页

archive_generator:
  per_page: 20 ##归档页面默认20篇文章标题
  yearly: true  ##生成年视图
  monthly: true ##生成月视图

tag_generator:
  per_page: 10 ##标签分类页面默认10篇文章

category_generator:
  per_page: 10 ###分类页面默认10篇文章

主题配置

自带的landscape主题不太好看，我选了NexT。将其克隆到本地，在根目录下theme文件夹下新建next文件夹，把刚才下载的全放进去，然后在根目录_config.yml里找到theme: landscape将其替换成next即启用该主题。官方给出的NexT主题使用教程十分详细，建议先看看，配合着岁月如歌的博客应该能做出效果不错的个人博客了。至此我们的博客就带有RSS订阅、百度统计、来访/阅读次数统计、网站地图、评论系统、分享服务、本地搜索等功能了。

以下针对我自己的问题作个记录。

文章分类

新增导航

默认导航栏只有首页、归档、标签、分类四项。如果想增加其他如C++、随笔等。需要打开\themes\next\_config.yml找到如下

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  categories: /categories
  tags: /tags
  archives: /archives
  # 这里是新增的，程序猿是一级目录，C是二级目录，同理随笔是一级目录
  c++: /categories/程序猿/C/
  python: /categories/程序猿/Python/
  essay: /categories/随笔/
  # 注意这里没有/categories
  about: /about

假如我想新建C++、Python、随笔三个导航按钮，并且打开他们的效果如下图。

需要注意的是前面要加上/categories，格式是这样python: /categories/这里是文章的一级目录/这里是文章的二级目录/。结尾要加上/分隔符。这几个页面是不需要通过hexo new page来生成的。关于导航栏及侧栏所用的图标来自fontawesome。在\themes\next\_config.yml里配置。

# 导航栏的图标，输入网站内图标的对应单词
menu_icons:
  enable: true
  #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  c++: keyboard-o
  python: keyboard-o
  essay: pencil
  commonweal: heartbeat
  # 社交网络图标
  social_icons:
  enable: true
  # Icon Mappings.
  # KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
  GitHub: github
  Email: envelope

写文章的时候只要分类目录对应就可以被正确归类到导航栏里。如下

---
title: Python爬虫初学（三）—— 模拟登录知乎
date: 2016-09-18 17:10:59
# 对应于/categories/程序猿/Python/
categories:
    - 程序猿
    - Python
tags:
    - Python
    - 爬虫
---

新增关于我页面

这个需要hexo new page "about"生成一个新页面，menu里面新增about: /about。在新增的about文件夹可以看到index.md，对其直接编辑就可，注意不要对此文件加tags和 categories，否则会出错。

公益404页面

HTTP 404或Not Found错误信息是HTTP的其中一种“标准回应信息”（HTTP状态码），此信息代表客户端在浏览网页时，服务器无法正常提供信息，或是服务器无法回应且不知原因。

按照NexT主题使用教程添加404页面对我来说好像不可用。在知乎的这个回答中复制了某匿名用户的的代码，拷贝到\themes\next\source\404.html可行。代码如下，其中重定向链接改成你自己的主页，还可以自定义背景图片。

<html>
<head>
    <meta charset="utf-8">
    <title>404 Not Found</title>
    <style>
        *{margin:0;padding:0;outline:none;font-family:\5FAE\8F6F\96C5\9ED1,ו;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-khtml-user-select:none;user-select:none;cursor:default;font-weight:lighter;}
        .center{margin:0 auto;}
        .whole{width:100%;height:100%;line-height:100%;position:fixed;bottom:0;left:0;z-index:-1000;overflow:hidden;}
        .whole img{width:100%;height:100%;}
        .mask{width:100%;height:100%;position:absolute;top:0;left:0;background:#000;opacity:0.6;filter:alpha(opacity=60);}
        .b{width:100%;text-align:center;height:400px;position:absolute;top:50%;margin-top:-230px}.a{width:150px;height:50px;margin-top:30px}.a a{display:block;float:left;width:150px;height:50px;background:#fff;text-align:center;line-height:50px;font-size:18px;border-radius:25px;color:#333}.a a:hover{color:#000;box-shadow:#fff 0 0 20px}
        p{color:#fff;margin-top:40px;font-size:24px;}
        #num{margin:0 5px;font-weight:bold;}
        .plan{color: black;background: white;font-size: 30px; margin-top: 20px;}
        .plan:hover{color: white;background: black;font-size: 30px;}

            #gg {
               position: absolute;
    width: 654px;
    height: 470px;
    left: 50%;
    top: 50%;
    margin-left: -377px;
    margin-top: -235px;
        }
    </style>
</head>
<body onload="redirect();">
      <div id="gg">
        <!--以下网址为益播生成的404页面-->
       <iframe   class="gg" scrolling='no' frameborder='0' src='https://yibo.iyiyun.com/Home/Distribute/ad404/1182245' width='654' height='470' style='display:block;'>
    </iframe>
    </div>
<div class="whole">
  <!--这里是自定义图片的地址-->
    ![](http://upload-images.jianshu.io/upload_images/2726327-4ae4ff22fb6c19da.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</div>
</body>
</html>

效果如图

继续美化博客

修改文章宽度

如果嫌博客页面两边大量留白，文章宽度不够，可以修改。见知乎-高爷的回答。

如何修改文章宽度？

  1. \themes\next\source\css_common\components\post\post-expand.styl

@media (max-width: 767px)
改为：
@media (max-width: 1280px)

  1. \themes\next\source\css\ _variables\base.styl中：

$main-desktop = 960px
$content-desktop = 700px
改成：
$main-desktop = 1280px
$content-desktop = 960px

我个人觉得这个又太宽了。于是改成@media (max-width: 1080px)、$main-desktop = 1080px、
$content-desktop = 810px，可凭喜好自己修改。我设置的文章宽度如下

配色与字体

继续在\themes\next\source\css\ _variables\base.styl折腾。

字号与行高

字号默认14px，虽然是主流，我个人觉得还是太小了点，看多了眼睛难受，设置成16px好多了。
找到$font-size-base = 14px，修改即可。该主题默认行高2.0，移动设备访问可见行高过高，找到$line-height-base = 2。修改成1.8个人觉得最为合适。至于代码块的字体，默认的13px确实有点小了。不过最好不要修改，否则会出现糟糕的滚动条。

配色

主要是修改网页背景色，修改超链接颜色。自定义颜色见颜色表。

//
// Variables
// =================================================
// Colors
// colors for use across theme.
// --------------------------------------------------
$whitesmoke   = #f5f5f5
$gainsboro    = #eee
$mycolor     = #EEE5DE
$gray-lighter = #ddd
$grey-light   = #ccc
$grey         = #bbb
$grey-dark    = #999
$grey-dim     = #666
$black-light  = #555
$black-dim    = #333
$black-deep   = #222
$red          = #ff2a2a
$blue-bright  = #87daff
$blue         = #0684bd
// 这是我自定义的颜色
$myblue    = #4682B4   
$blue-deep    = #262a30
$orange       = #fc6423
$mylink      = #36648B

// Scaffolding
// Settings for some of the most global styles.
// --------------------------------------------------
// Global text color on <body>
$text-color                   = $black-deep
// 修改超链接颜色
// Global link color.
$link-color                   = $myblue
$link-hover-color             = $mylink
$link-decoration-color        = $gray-lighter 
$link-decoration-hover-color  = $mylink

// Global border color.
$border-color                 = $black-light

// Background color for <body>
// 背景色，默认white，我认为太刺眼就换成了烟灰色
$body-bg-color                = whitesmoke
// 鼠标选择区域
// Selection
$selection-bg                 = $blue-deep
$selection-color              = white

我就折腾了这么多，至此博客搭建完成。


微信公众号【Java技术江湖】一位阿里 Java 工程师的技术小站。（关注公众号后回复”Java“即可领取 Java基础、进阶、项目和架构师等免费学习资料，更有数据库、分布式、微服务等热门技术学习视频，内容丰富，兼顾原理和实践，另外也将赠送作者原创的Java学习指南、Java程序员面试指南等干货资源。

本文主要介绍了final关键字的使用方法及原理

文章标签：
Python
开发工具
git
程序员
C++
关键词：
GitHub个人博客
GitHub Pages
GitHub hexo
GitHub hexo个人博客
GitHub搭建
程序员黄小斜
目录
相关文章
SarPro
|
8天前
|
存储 JavaScript 网络架构
【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床
【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床
SarPro
25 3
穆雄雄.
|
28天前
|
Shell 网络安全 开发工具
Github Pages + Jekyll 独立博客一小时快速搭建&上线指南
Github Pages + Jekyll 独立博客一小时快速搭建&上线指南
穆雄雄.
56 1
参谋总长萨博
|
4月前
|
资源调度 前端开发 JavaScript
不花一分钱，用Hexo和GitHub Pages搭建个人博客🏢
不花一分钱，用Hexo和GitHub Pages搭建个人博客🏢
参谋总长萨博
108 0
阿甘兄
|
4月前
|
JavaScript 开发工具 git
保姆级教程：从零构建GitHub Pages静态网站（下）
保姆级教程：从零构建GitHub Pages静态网站（下）
阿甘兄
119 0
越前君
|
1月前
|
程序员 API Android开发
使用 VS Code + Github 搭建个人博客
搭建个人博客的方案
越前君
32 1
盖丽男
|
3月前
|
存储
github pages 部署单页面
github pages 部署单页面
盖丽男
51 0
宁在春
|
3月前
|
缓存 网络协议 CDN
Docsify 配合 Github Pages 搭建一个自己的云笔记
Docsify 配合 Github Pages 搭建一个自己的云笔记
宁在春
88 0
QBorfy
|
4月前
Hexo博客添加GitHub评论功能
Hexo博客添加GitHub评论功能
QBorfy
48 0
lizer2016
|
JavaScript 安全 开发工具
在github上搭建blog(基于Node.js的Hexo+next)
演示 安装node.js wget https://nodejs.org/dist/v4.4.6/node-v4.4.6.tar.gz $ tar zxvf node-v0.8.16.tar.gz $ ./configure $ sudo make && sudo make install 或者使用Hexo官网说的方式： 安装 Node.js 的最佳方式是使用 nvm。
lizer2016
1291 0
千里一游
|
29天前
|
人工智能 文字识别 异构计算
关于github开源ocr项目的疑问
小白尝试Python OCR学习，遇到报错。尝试Paddle OCR部署失败，Tesseract OCR在Colab误操作后恢复失败。EasyOCR在Colab和阿里天池Notebook成功，但GPU资源不足。其他平台部署不顺，决定使用WebUI或阿里云轻应用。求教OCR项目部署到本地及简单OCR项目推荐。
千里一游
26 2

热门文章

最新文章

  • 1
    『GitHub项目圈选17』推荐5款本周 火火火 的AI开源项目
  • 2
    『GitHub项目圈选12』推荐5款本周 深受追捧 的AI开源项目
  • 3
    『GitHub项目圈选18』推荐5款本周 超实用 的开源项目
  • 4
    Github Pages + Jekyll 独立博客一小时快速搭建&上线指南
  • 5
    『GitHub项目圈选06』推荐5款本周 超火 的开源AI项目
  • 6
    『GitHub项目圈选19』推荐5款本周 让人爱不释手 的开源项目
  • 7
    推荐GitHub上开源的一款独立开发者出海技术栈和工具合集
  • 8
    『GitHub项目圈选11』推荐5款本周 深受开发人员青睐 的开源项目
  • 9
    『GitHub项目圈选13』推荐5款本周 让人爱不释手 的开源项目
  • 10
    『GitHub项目圈选16』推荐5款本周 大佬狂爱 的开源项目
  • 1
    新一代开源语音库CoQui TTS冲到了GitHub 20.5k Star
    39
  • 2
    使用 VS Code + Github 搭建个人博客
    32
  • 3
    Python爬虫-模拟Github登录并获取个人信息
    24
  • 4
    通过一篇文章带你玩转git和GitHub
    81
  • 5
    StarCoder 2：GitHub Copilot本地开源LLM替代方案
    127
  • 6
    web后端-GitHub文件夹上传操作
    13
  • 7
    Git与GitHub：解锁版本控制的魔法盒子
    30
  • 8
    解决GitHub无法访问的问题：手动修改hosts文件与使用SwitchHosts工具
    89
  • 9
    爆赞！GitHub上首本IntelliJ IDEA操作手册，标星果然百万名不虚传
    18
  • 10
    GitHub排名第一《lntellij IDEA软件开发与应用实战手册》限时开源
    40

    • 相关课程

    更多
  • 实时数据分析：使用Flink实时发现最热Github项目

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 基于Hologres+Flink搭建GitHub实时数据大屏
  • Github实时数据分析与可视化
  • 使用Flink实时发现最热Github项目
  • 3分钟搭建个人Hexo博客
  • 基于函数计算快速搭建Hexo博客系统
    • 下一篇
    阿里云oss简介和使用流程