建立博客
建立一个免费的、易于维护的个人博客以用于自己或者中小组织的信息发布、生活记录等,个人认为是一个做生物信息的同学的必备技能,而博客做的是否好看还要多多学习。下面说一下建立一个免费的个人博客所需的步骤和后期如何写博文、上传网站上的一些技巧。
因为过年期间是在家里,所以没有服务器以及相关域名可以使用,所以学习去做了一个简单的静态博客。虽然有些步骤是可以调换顺序的,但我还是推荐按照下面的步骤进行操作。
必备软件的安装
为了方便地构建我们的博客,这里使用了 hexo 来构建页面。而为了使用 hexo 则必须安装 git (https://git-scm.com/downloads)
和 node.js (https://nodejs.org/en/download/) 。
在安装好 git 和 node.js 之后,在安装包或者你需要安装的单独文件夹内打开 git bash ,输入以下命令来安装 hexo :
npm install -g hexo-cli
随后,在你希望存放你的博客网站的文件的地方新建一个文件夹,(在Windows中)右键选择 git bash here ,随后在跳出来的终端中输入:
hexo init blog
cd blog
npm install
hexo server
其中 blog 只是一个文件夹的名字,你也可以取其他的名字(当然后面需要记住这个名字)。
利用 GitHub Pages 服务
GitHub 为每一位用户提供了 GitHub Pages (https://pages.github.com/) 服务。它完全免费,而且易于使用,唯一的缺点在于 GitHub Pages 的页面在国内加载起来普遍较慢。
为了克服这个缺陷,我们也可以使用国内的代码托管厂家码云提供的码云Pages (https://gitee.com/help/articles/4136),它使用起来和 GitHub Pages 几乎没有差别,但我没用。
为了使用 GitHub Pages 服务,你首先应当注册一个 GitHub 账号 (https://github.com/)。注册时记得记住自己用于注册的邮箱和用户名。
注册完成后,跟随官网的引导,新建一个仓库。仓库名必须用以下格式写:用户名.github.io
仓库创建成功不会立即生效,但是也可能立即生效,试验了两次。
配置 git
打开 git bash ,并在终端中输入以下内容:
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"
注意在你的用户名和邮箱外侧加上英文的引号 ""。
完成后,我们开始配置 ssh 。
首先在 git bash 中输入以下命令检查本机中已经有的ssh密钥:
ls -al ~/.ssh
如果没有,则生成新的 ssh key :
ssh-keygen -t rsa -C "你的GitHub注册邮箱"
你可以选择设定一个密码,如果不想要密码的话也可以直接按三次回车来完成设置。
随后,使用下面的命令来在终端中打开刚刚生成的 ssh key :
cat ~/.ssh/id_rsa.pub
复制这个文件的内容到剪贴板,随后打开你的 GitHub 中的 Settings -> SSH and GPG keys -> New SSH key
随后黏贴进去。
接下来回到 git bash 中测试 GitHub 的公钥设置是否成功。
在 git bash 中精确地输入下列内容([email protected] 是不能更改的!):
ssh -T [email protected]
对跳出来的问题回答“yes”,随后回车。出现以下结果即为成功:
You've successfully authenticated, but GitHub does not provide shell access.
远程部署
接下来我们要让 hexo 学会将生成的博客文件部署到远端的服务器上。
打开你的 GitHub Pages 对应的仓库,找到“Clone or download”,随后将 https 或者 ssh 的 url 复制到剪贴板上。
随后打开你的 hexo 主文件夹(如果你完全按照本博文的引导进行操作,那这个文件夹的名字应该是 blog)。在这个文件夹(而非子文件夹中)中找到并打开 _config.yml,随后找到 deploy这个关键字(一般在文档末尾,但是不一定),把他修改成下面的样子:
deploy:
type: git
repo: 直接黏贴,例如https://github.com/wunsiang/wunsiang.github.io.git
branch: master
要注意,英文冒号后面要有一个空格,不然 hexo 无法工作。
更改完成后,在你的 hexo 安装目录下打开 git bash 并输入以下内容:
npm install hexo-deployer-git --save
在确认一切无误后,同样在 git bash 中输入
hexo g -d
就可以将本地的内容远程部署到你的 GitHub Pages 上了!
开始使用博客
那么,和技术相关的问题基本上都解决了(要是大家遇到了问题,可以以“hexo”和“GitHub Pages”为关键词到网上寻找相应的解决方案)。
接下来的问题就是如何开始写我们的博文了!
为了愉快优雅地写博客,我们还需要学会一些技能。比如如何新建一个博文,如何改变博客的外观等。
在我们用简单易学的 Markdown 写好了我们的博文后,我们使用的 hexo 可以自动将 .md 文件转换为 HTML 文件。
如何新建页面和博文
在 hexo 中,新建博文的方法非常简单。你可以用下面的命令来新建博文和页面:
hexo new [layout]
其中的 layout 也被称为布局。Hexo 有三种默认布局:post、 page 和 draft。创建三种不同类型的文件后,它们将会被保存到不同的路径;而您自定义的其他布局和 post 相同,都将储存到 source/_posts 文件夹。
布局 路径
post source/_posts
page source
draft source/_drafts
学会用 Markdown 写作
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,在 2004 由约翰·格鲁伯(英语:John Gruber)创建。Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。用 Markdown 编写的文档后缀为 .md, .markdown。
进行markdown写作非常简单易学。下面简单介绍 Markdown 中常用的语法。如果大家需要专业的指导请参考其官方语法指导(http://www.markdown.cn/)。
段落和换行
一个 Markdown 段落是由一个或多个连续的文本行组成,它的前后要有一个以上的空行(空行的定义是显示上看起来像是空的,便会被视为空行。比方说,若某一行只包含空格和制表符,则该行也会被视为空行)。普通段落不该用空格或制表符来缩进。
加粗、倾斜
要加粗的文字左右分别用两个 *号包起来
要倾斜的文字左右分别用一个 *号包起来
要倾斜和加粗的文字左右分别用三个 *号包起来
要加删除线的文字左右分别用两个 ~~号包起来
这是加粗的文字
这是倾斜的文字`
这是斜体加粗的文字
标题
markdown中标题的输入方法有两种,这里推荐类 Atx 形式。
在行首插入 1 到 6 个 # ,对应到 1 到 6 级的标题,例如:
# 这是 一级标题
## 这是 二级标题
###### 这是 三级标题
列表
Markdown 支持有序列表和无序列表。
无序列表使用星号 *、加号 +或是减号 -作为列表标记:
- Red
- Green
- Blue
有序列表则使用数字接着一个英文句点:
- Bird
- McHale
- Parish
引用
Markdown 标记区块引用是使用类似 email 中用 > 的引用方式。如果你还熟悉在 email 信件中的引言部分,你就知道怎么在 Markdown 文件中建立一个区块引用,那会看起来像是你自己先断好行,然后在每行的最前面加上 > ,Markdown 也允许你偷懒只在整个段落的第一行最前面加上 > :
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.
区块引用可以嵌套(例如:引用内的引用),只要根据层次加上不同数量的 > :
This is the first level of quoting.
This is nested blockquote.
Back to the first level.
超链接
Markdown 支持两种形式的链接语法:行内式和参考式两种形式。
不管是哪一种,链接文字都是用 [方括号] 来标记。
要建立一个行内式的链接,只要在方块括号后面紧接着圆括号并插入网址链接即可,如果你还想要加上链接的 title 文字,只要在网址后面,用双引号把 title 文字包起来即可,例如:
This is an example inline link.
This link has no title attribute.
插入图片
Markdown 使用一种和链接很相似的语法来标记图片,同样也允许两种样式:行内式和参考式。
行内式的图片语法看起来像是:
如果你希望插入自己的照片而非在线的照片,你应该使用图床。图床允许你上传自己的照片并获得该图片的直链。
推荐的图床为路过图床 (http://imgchr.com) 。请注意上传到图床上的图片有一定的大小限制,一般在 5 MB 左右。
路过图床允许你在上传完图片之后直接复制markdown代码,非常节省时间。并且该图床有 cdn 加速,加载速度比较快。
学会使用一些 hexo 组件
hexo 除了支持标准的 Markdown 语法,也为了更好地生成网页,支持在 Markdown 中加入一些非标准的语法,来达到更好的效果。
博文的“扉页”
在 hexo 的 .md 文件开头,有以 ---分割的一块区域,叫做“Front-Matter”,这个区域用于记载博文的标题、写作日期和分类等信息。形如下面的形式:
title: Hello World
date: 2019/7/23 14:16:44
categories:
- Maintaince
在 Front-Matter 中预先定义好的参数有以下这些:
参数 描述 默认值
layout 布局
title 标题
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签(不适用于分页)
categories 分类(不适用于分页)
permalink 覆盖文章网址
keywords 仅用于 meta 标签和 Open Graph 的关键词(不推荐使用)
只有文章支持分类和标签,您可以在 Front-matter 中设置。在其他系统中,分类和标签听起来很接近,但是在 Hexo 中两者有着明显的差别:分类具有顺序性和层次性,也就是说 Foo,Bar 不等于 Bar,Foo;而标签没有顺序和层次。例如:
categories:
- Homework
tags: - Chemistry
- Synthesis
引用
Hexo 中定义了更好用更高等的引用块。通式是这样的:
{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}
例如,当你引用网络上的文章:
{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}
代码块
同样的,Hexo 也定义了更高级的代码块:
{% codeblock [title] [lang:language] [url] [link text] %}
code snippet
{% endcodeblock %}
例如:
{% codeblock 希尔排序 lang:c https://www.runoob.com/cprogramming/c-sort-algorithm.html C 排序算法 %}
void shell_sort(int arr[], int len) {
int gap, i, j;
int temp;
for (gap = len >> 1; gap > 0; gap = gap >> 1)
for (i = gap; i < len; i++) {
temp = arr[i];
for (j = i - gap; j >= 0 && arr[j] > temp; j -= gap)
arr[j + gap] = arr[j];
arr[j + gap] = temp;
}
}
{% endcodeblock %}
如何美化你的博客
为了美化你的博客,你可能想更换一下主题,在文章里插入一些图片和视频等多媒体。接下来我们来看看如何做到这些。
更换主题
Hexo 有非常多现成的主题(https://hexo.io/themes/),可以让你不费吹灰之力就将自己的博客变得非常漂亮。我们该如何获取主题呢?
接下来我们以更换为 NexT 主题为例子,进行切换主题。
首先我们需要安装主题。
第一种方式,是找到你的站点文件夹,并在该位置呼出 git bash ,随后输入:
git clone https://github.com/iissnan/hexo-theme-next themes/next
第二种方式是前往 NexT 主题的发布页面
(https://github.com/iissnan/hexo-theme-next/releases),随后下载最新的稳定版,并解压到你的站点文件夹的 themes子文件夹中,最后将解压后的文件夹名称(hexo-theme-next-5.1.4)更改为 next。
随后我们找到站点配置文件 _config.yml,找到 theme字段,并将其更改为:
theme: next
即可成功启用 NexT 主题。我们也可以对主题进行更进一步的自定义化,此处不详述,可参见NexT入门指南 (http://theme-next.iissnan.com/getting-started.html)。
插入多媒体
为了让我们的博客更可读,我们还需要学会在博客中插入图片和视频的方法。
插入图片的方法和使用图床的技巧之前已经讲过了,此处不再赘述。
在博客中比较优雅地插入视频需要使用 HTML 中的 iframe 控件。
下面以插入一个 bilibili 视频为例。
在网页端进入视频的播放页后,大家可以在分享选项中找到相应的嵌入代码:
但是你会发现直接使用上面的代码生成的网页在移动端的体验很差。把上面那段代码中的 src="..."
中间的地址复制下来,黏贴到下面的代码中覆盖 src="..."
中间的内容,就可以得到体验较好的视频嵌入体验。
分享文件
如果大家想分享文件,当然也可以采用国内的各种网盘。但是使用国内的网盘需要你的读者们注册相应的账号,而且也有非常严重的限速问题。这个时候我们就可以使用 hostr.co 等文件床,来让读者们能直接从你博客中的链接下载文件。你可以在它的官网(https://hostr.co)注册账号,虽然免费账号只能上传最大 20 MB 的文件,但是对于常规文件的分享也是非常够用了。
效果展示
当所有配制结束之后,需要输入 hexo server 开启静态网页服务,他会输出如下形式的对话,复制其中的网址就可以登陆自己的静态网页
在网页端进入视频的播放页后,大家可以在分享选项中找到相应的嵌入代码:
但是你会发现直接使用上面的代码生成的网页在移动端的体验很差。把上面那段代码中的 src="..."
中间的地址复制下来,黏贴到下面的代码中覆盖 src="..."
中间的内容,就可以得到体验较好的视频嵌入体验。
分享文件
如果大家想分享文件,当然也可以采用国内的各种网盘。但是使用国内的网盘需要你的读者们注册相应的账号,而且也有非常严重的限速问题。这个时候我们就可以使用 hostr.co 等文件床,来让读者们能直接从你博客中的链接下载文件。你可以在它的官网(https://hostr.co)注册账号,虽然免费账号只能上传最大 20 MB 的文件,但是对于常规文件的分享也是非常够用了。
效果展示
当所有配制结束之后,需要输入 hexo server 开启静态网页服务,他会输出如下形式的对话,复制其中的网址就可以登陆自己的静态网页
其余的还在研究,比如如何更好的去构建网页,比如git的深入分析了解,比如静态网页为什么需要开启服务,否则分享不了等问题。。。。
以上内容仅供参考