Github Pages + Hexo搭建个人博客

  1. 云栖社区>
  2. 博客>
  3. 正文

Github Pages + Hexo搭建个人博客

黄小斜 2018-04-20 22:21:18 浏览796
展开阅读全文

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 404Not 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关键字的使用方法及原理

网友评论

登录后评论
0/500
评论
黄小斜
+ 关注