工具：Jekyll搭建个人博客

2020-10-05  本文已影响0人  生信学习者2

搭建个人网站和博客

博客是技术人员或者普通人记录自身兴趣爱好或者技术贴等工具，随着开源社区的发展，尤其是免费的github pages更方便人们建立自己的博客，本文章主要记录自己建博客的经历。更多知识分享请到 https://zouhua.top/。

搭建个人博客主要有两种方式

  • 第一种方法是使用Giuthub Pages + jekyll 搭建；
  • 第二种方法是使用Giuthub Pages + Hexo搭建

这里主要介绍第一种方法，并记录搭建过程遇到的坎坷。

准备工作

  1. 安装Jekeyll：Jekyll是一个生成静态网页的工具。Windows(上)和mac os(下)安装指南：
    1. 下载[Ruby+Devkith](https://rubyinstaller.org/downloads/)，默认安装
2. 下载RubyGerms，解压，进入管理员模式下命> 令行安装，输入ruby setup.rb。（该软件是Ruby的包管理器，也就是下载中心，**PS：可跳过该步骤直接进入第三步**） 
3. 安装Jekyll，在cmd模式下，输入命令 gem install jekyll，使用jekyll -v 检查是否安装成功。

    1. xcode-select --install : 编译模块
2. 安装ruby
   /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
   brew install ruby 
   export PATH=/usr/local/opt/ruby/bin:$PATH
3. 安装rbenv
   /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
   brew install rbenv
   rbenv init
   curl -fsSL https://github.com/rbenv/rbenv-installer/raw/master/bin/rbenv-doctor | bash
4. 安装Jekyll 
   gem install --user-install bundler jekyll
   export PATH=HOME/.gem/ruby/X.X.0/bin:PATH
  1. 安装git bash

    git是分布式版本控制系统，git bash是使用git 命令的GUI界面。

  2. 安装Typora

    Typora是最好的markdown编辑器，不接受反驳。该软件用于编辑博客的markdown文件。

    Typora是一款由Abner Lee开发的轻量级Markdown编辑器，适用于Mac OS、Windows和Linux三种操作系统，是一款免费软件。与其他Markdown编辑器不同的是，Typora没有采用源代码和预览双栏显示的方式，而是采用所见即所得的编辑方式，实现了即时预览的功能，但也可切换至源代码编辑模式。

搭建步骤

注册github账号，并且建立博客Github仓库。创建方法有两种：

  1. 从头开始设置主题

  2. 直接fork他人的blog主题：

注意：仓库名字一定要和自己的账户名字一致：Repository name : githubname.github.io

了解Jekyll博客的目录结构
撰写博客

博客文章可以使用markdown或html来编写，因为markdown是轻量编辑语言，所以推荐使用markdown来书写文章。但需要注意几点：

  1. md文件需要包含描述文章类型的title，具体参照Github md。

  2. md文件的命名需要符合Permalinks。

  3. md文件所包含的图片等，需要放置在_posts/img/目录，并且路径需要换成网页版绝对路径。如 “https://raw.githubusercontent.com/HuaZou/HuaZou.github.io/master/_posts/img/R.cbind-1.png”

本地渲染后上传至git仓库

Github Pages的局限性

Github Pages 并不是无限存储和无限流量的静态站点服务，一些限制如下：

优化主题配置

选择scheme

设置头像和网址log设置

本地图片格式为png类型，在根目录下寻找assests目录，替换avatar.png 和favicon.png即可。

头像图标：avatar: /assets/avatar.png
网页图标：favicon: /assets/favicon.png

设置网站标题栏背景变色

打开_sass/_custom/custom.scss，在里面新增如下代码：

.site-meta {
  background: $blue; //天空的颜色
}

设置背景图片

打开_sass/_custom/custom.scss，在里面新增如下代码：

// Custom styles.
body {
  background: url(/assets/background/18041.jpg);
  background-attachment: fixed;
}

设置菜单

菜单配置分为两部分，其中menu部分的名称和连接；另一部分是菜单的图标。

<u>menu</u>设置，用于匹配图标，格式是：item: link

menu:
  home: /                        #//首页
  about: /pages/about/           #//关于
  #resume: /resume/              //简历
  archives: /pages/archives/     #//归档
  categories: /pages/categories/ #//分类
  tags: /pages/tags/             #//标签
  #message: /pages/message/      //留言
  #myseo: /myseo/
  #schedule: /schedule/          //日程表
  #sitemap: /sitemap.xml         //站点地图
  #commonweal: /404.html          #//公益404

<u>menu_icons</u>图标设置，NexT主题使用的图标可以由Font Awesome提供。

menu_icons:
  enable: true
  #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
  home: home
  about: user
  archives: archive  
  categories: th
  tags: tags
  #schedule: calendar  
  sitemap: sitemap
  #commonweal: heartbeat
  #myseo: internet-explorer
  #resume: handshake-o
  #message: commenting
  #friends: link
  #file: file-archive-o
  #ariang: cloud-download

设置侧边栏

修改_config.yaml文件的sidebar字段控制侧栏的行为。侧栏包括两部分，位置和显示时间。

sidebar:
  # Sidebar Position, available value: left | right
  position: left      # //靠左放置
  #position: right    # //靠右放置

  # Sidebar Display, available value:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  Totally remove sidebar including sidebar toggle.
  #display: post
  display: always
  #display: hide
  #display: remove

设置预览摘要

excerpt_separator: '<!-- more -->'

layout: post
#cover: 
#navigation: 
title:  "如何简单快速地搭建个人博客站点"
date:   2019-08-29 10:36:00
updated: 2019-08-30
categories: 生活笔记
tags: 博客
#subclass: 
#logo: 
author: Hua Zou
excerpt: 博客是技术人员或者普通人记录自身兴趣爱好或者技术贴等工具，随着开源社区的发展，尤其是免费的github pages更方便人们建立自己的博客，本文章主要记录自己建博客的经历。

# 标记内容是暂时不明白的属性

auto_excerpt:
    enable: true
    length: 150

修改文章底部的带#号标签

打开 _includes/_macro/post.html 文件,搜索 rel="tag"># ,
将 # 换成 <i class="fa fa-tag"></i>

设置代码高亮主题

NexT 使用 Tomorrow Theme 作为代码高亮，共有5款主题供你选择。 NexT 默认使用的是 白色的 normal 主题，可选的值有 normal，night， night blue， night bright， night eighties.修改highlight_theme 字段，将其值设定成你所喜爱的高亮主题。

设置文章宽度

打开_sass/_custom/custom.scss，在里面新增如下代码：

// 主页文章文章宽度
.header{ width: 80%; } /* 80% */
.container .main-inner { width: 80%; } /* 80% */
.content-wrap { width: calc(100% - 260px); }

安装过程遇到的问题

  1. Could not find gem 'github-pages x64-mingw32' in any of the gem sources listed in
    your Gemfile.

    • 问题：无法渲染web网页。
    • 原因：可能版本太低或者依赖包缺失。
    • 解决：更新bundle后安装依赖包。
      • bundle update 或者 bundle update --bundler
      • bundle install

  2. GitHub Metadata: No GitHub API authentication could be found. Some fields may be missing or have incorrect data.

  1. scss文件编译为css文件：Error: Invalid GBK character "\xE6" on line 1 of ... 报错
    • 问题：main.scss文件编译报错。
    • 原因：scss文件存在中文等字符，导致编码方式错误。
    • 解决：表头增加**@charset “utf-8”; **

注意事项

文章内图片过大，可以通过压缩图片图快好

文章加密

某些文章可能是个人的生活写照，因此可以设置密码加密

  1. 使用static crypt软件，在powershell内安装“static crypt”；

  1. 参数设置“staticrypt <filename> <passphrase> [options]”

    Options:
  --help               Show help                                       [boolean]
  --version            Show version number                             [boolean]
  -e, --embed          Whether or not to embed crypto-js in the page (or use an
                       external CDN)                   [boolean] [default: true]
  -o, --output         File name / path for generated encrypted file
                                                        [string] [default: null]
  -t, --title          Title for output HTML page
                                            [string] [default: "Protected Page"]
  -i, --instructions   Special instructions to display to the user.
                                                        [string] [default: null]
  -f, --file-template  Path to custom HTML template with password prompt.
                          [string] [default: "[...]/cli/password_template.html"]
  1. 将加密文件放置在secret目录，使用jekell build secret将md文件生成html；
  1. 使用staticrypt *html passphrase；
  1. 将secret添加入.gitignore；
  1. 上传修改。

在github内支持渲染Latex公式

在Typora内编辑数学公式能完美渲染，但提交到github后只能查看公式无法渲染，需要做如下修改：

  1. 在配置文件_config.yml设置markdown: kramdown参数；
  2. 修改_cludes目录内的header.html文件

引用

  1. Github Pages + jekyll 全面介绍极简搭建个人网站和博客

  2. Jekyll文章列表摘要设置

  3. NexT主题配置

  4. 文章加密设置

  5. 加密软件staticrypt

  6. github支持渲染Latex公式

    ​

参考文章如引起任何侵权问题，可以与我联系，谢谢。

上一篇下一篇

猜你喜欢

热点阅读