工具: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 主题,可选的值有 normalnightnight bluenight brightnight 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公式

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

上一篇下一篇

猜你喜欢

热点阅读