博客搭建全过程

发表信息: by Creative Commons Licence

目录:

正文:

本文详细介绍博主第一次搭建博客的全过程。包括购买域名,搭建博客(使用GitHub、jekyll)

为了小白易于实战,尽可能将实现过程简单化。

在跟随本文完成一次博客的搭建后,可根据本文提供的链接进行进阶学习,完善自己的博客。

其中购买域名在博客搭建过程中并非是必须的,可以跳过。

一、购买域名

博主是在GoDaddy中文网上购买的

第一步:注册Godday并登陆

第二步:搜索想好的域名

搜索后可以看到域名是否已经被占用。如上图提示okcat.cn已经被占用。如果域名已被占用,可以选择未被占用的域名后缀,或者重新想新的域名

第三步:确定域名后,添加到购物车。之后其他选择可以选【不】,也可以根据自己需求来选。

后面就根据要求填写信息,支付宝付款即可。

可直接在浏览器里搜索GoDaddy优惠券,获取一些折扣。

第四步:最后,邮件激活域名。

博主的域名激活需要身份证实名认证,第2天认证通过。

二、GitHub

博客是托管在GitHub上的,同样需要先注册GitHub

GitHub提供了GitHub Pages服务,可以很方便的用来搭建个人博客。

git 可以看做是使用GitHub的一项工具,下面介绍如何安装和使用git

这里及以下都是在windows环境下,

2.1 git设置总共分成三个步骤:

第一步:下载并安装git

按照默认选项点击安装即可,安装成功时,默认也安装了git bash

第二步:设置git当前用户名

可以打开git bash ,或者 windows徽标键 + r,输入cmd,打开命令行,如下图

然后输入:

git config - -global user.name "用户名" # 注意global前是两个横杠,横杠之间没有空格

用户名可以与GitHub注册时的用户名不同

验证结果对不对

git config - -global user.name

第三步:设置邮箱

输入:

git config - -global user.email "邮箱地址"

同样可以验证一下

git config - -global user.email

2.2 本地仓库和远程仓库搭建

本地仓库和远程仓库形象化可以理解成在本地电脑上的文件夹和GitHub官网上自己主页里的文件夹

首先要搭建一个远程仓库,去管理我们的博客;

然后将远程仓库复制到本地;

在本地修改博客后,再发送到远程仓库上去 这里还会提及,域名与GitHub关联 (如果没有注册域名,此步骤可忽略)

第一步:搭建远程仓库

登陆GitHub,点击+,然后点击 New repository。 取名为 GitHub用户名.github.io

每个用户只能建一个这样命名的仓库

建好后,会进入这个界面,可以点击README,给自己仓库建文档 - 说明文档,内容随意写

新建的文档都是通过点击最下面的 commit new file 进行提交

接着将这个仓库与域名关联:建立一个CNAME文件,内容为自己的域名(如果没有注册域名,此步骤可忽略)。

点击 create new file 即可:

域名关联上需要一些时间,可以点击setting查看结果,记得将 Enforce HTTPS 勾上,这样输入 用户名.github.io时,也会自动跳转到域名.(如果没有注册域名,此步骤可忽略)。

第二步:将远程仓库复制(下载)到本地

同样前面类似步骤,windows徽标键 + r,输入cmd,打开命令行

在里面输入

git clone + 远程仓库网址 远程仓库网址见下图,直接复制浏览器地址,或者点击clone or download 复制里面地址都可以 直接点击download下载文件,和使用命令 git clone 是差不多的效果。

如果希望将这个本地仓库复制(下载)在指定目录下,可以使用cd 命令将当前目录切换到指定目录。例子如下:

当我cmd打开命令行以后,默认的当前目录是 C:\Users\JP_W

我想切换到JP_W下的tutorial文件下,就cd tutorial,即

cd 指定文件夹名

如果想返回上一级目录,就cd .. (cd 加 两个点)

上图做了两个示范,从C:\Users\JP_W\tutorial 变成 C:\Users\JP_W 再变成 C:\Users

此时是在C盘,如果我想切换到D盘里MyBlog文件夹下,就cd /d D:MyBlog (cd 加 /所在盘 加 目录)

目前掌握这些即可

进一步学习的链接

更多git中文学习资料见:廖雪峰git教程

上述安装过程官方文档点击这里

这一部分到此为止,下一节介绍jekyll,并介绍在本地修改博客设置和内容后,如何提交到远程仓库里。

三、jekyll

GitHub Pages 提供了博客搭建的平台,而jekyll则是为博客的设计和写入提供了便利

这里主要介绍 主题模板博客撰写 两个方面

使用jekyll,首先需要安装jekyll:

3.1 安装jekyll

第一步:下载并安装RubyInstall

如果不确定选择哪个版本的,推荐使用 Ruby+Devkit 2.4.X 系列

安装成功以后,可能会蹦出控制台,让安装msys2,如果安装一直失败,可以手动在此下载安装(如果下载依旧很慢就先进行接下来的步骤)

注意:安装过程要勾选"Add Ruby executables to your PATH"

在cmd中输入

ruby -v gem -v 检查是否安装成功(无需等msys2安装好)

第二步:安装jekyll

因为rubygems官网被墙,很难下载里面的东西,我们需要更换来源(source) 因此首先输入:

gem source -a https://gems.ruby-china.com/ -r https://rubygems.org/ 更换来源后下载: gem install jekyll

到此完成安装过程

3.2 配置主题

这里使用现有的主题模板,在模板基础上进行修改。

打开主题模板,从中选择一个自己喜欢的模板

点击Demo可以看到模板效果,Homepage是其在GitHub上的代码,download可下载(也可以通过GitHub里的** git clone **完成,前面介绍了)

下一步:

下载并放置在自己的仓库里,也就是复制里面的目标信息到【用户名.github.io】这个目录下,无需新建文件夹,可参考我的GitHub

3.3 博客撰写

完成模板的复制后,主要就是修改里面的参数,以符合自己的需求

最重要的是下面这几个文件:

建议下载安装notepad++,使用notepad++打开下面这些文件,在notepad++里修改文件内容,否则容易因为中文编码造成各种错误

_config.yml 影响页面,比如把页面上的英文改成中文等。可以修改后提交看看页面哪里变化了,对照着看一看方便理解参数的含义,不同的模板会有细节上的差别

Gemfile 主要需要修改source,同前面一样,将https://rubygems.org/ 改成 https://gems.ruby-china.com/ ,并添加gem "github-pages", group: :jekyll_plugins

也就是将

source "https://gems.ruby-china.com" gem "github-pages", group: :jekyll_plugins 添加在Gemfile文件里

_posts 是放博客内容的地方,里面文件的命名必须是 年-月-日-博客名称,如

如果在本地仓库内修改完以上内容,可以打开cmd,使用cd 切换到本地仓库所在目录

然后向远处仓库提交修改

git add . # add . 意思是添加所有的修改内容 add 和 . 之间有空格 git commit -m'修改配置' # commit 是提交修改, -m后是注释,方便自己记录每次修改 m前是一个横杠,且之前没有空格 git push origin master # 将修改推送到远程仓库去,保持两者的同步 第一次博客修改就完成了

打开自己的域名(如果没有注册域名,就输入 用户名.github.io 一样的效果)就可以看到新的博客界面,如果还未更新就等一会儿

博客内容的撰写,可以选择markdown等多种语言,markdown对于小白而言更容易上手,这里截图本博客的markdown界面(也就是_posts文件夹里的文件内容),供参考:

注意:如果另起一行,句子与句子之间需要空一行,否则最后会合并在同一行

进一步学习的链接

jekyll官网

jekyll的中文教程

如果不想用已有的模板,而想自己纯手工制作一个页面,入门可参考阮一峰的网络日志