搭建minima主题的github博客网站

雨点打透心脏的1/2处 2022-02-15 02:27 314阅读 0赞

微信公众号： 吴甜甜的博客  
我的个人网站： [wutiantian.github.io][]

--------------------

鸣谢：王顶 老师（河北经贸大学，github：wangding），该文章为网络课程教学素材。  
我（吴甜甜）学习了王顶老师的github系列课程，并得到王顶老师网络指导多次。

更多学习视频内容请登陆51CTO视频课，[【王顶】GitHub 开源之旅视频课程第八季：Jekyll 静态站][GitHub _Jekyll]，全套课件见王顶老师的github仓库https://github.com/wangding/courses

--------------------

`本文主旨：为非前端的“零基础”，“免费”拥有github.io“域名”并有兴趣**搭建简单的博客网站”朋友，提供从零开始的初级git、jekyll静态站技术，全套搭建流程及问题解决注解。`

观看本文前应具备Markdown语法及 linux 命令行操作基本基本语句语法。

> 本文写作顺序：1.先用自己的语言简要比喻下流程，让读者先熟悉下流程，这样搭建问题中出现的问题能有自己的解决思路。2.搭建流程，不含环境与软件安装。先过下顺序让心中有数。3.软件环境与环境搭建、问题解决解答。4.git的操作初级基础，上传仓库并打开欣赏自己的博客网站。5.在windows系统下上传自己博客文章。

--------------------

# [我的博客网页wutiantian.github.io][wutiantian.github.io 1] #

我大学时想有一个自己的网站，但是因为学的是“电子信息工程”专业，对前端方面并没有了解，以为要每年买百元的 COM 域名养着，还要自己搭建，所以一直搁置。

本文的方法，是免费获得github旗下的域名方法，域名里要有 github 字样。例如：[帐户名.github.io][.github.io]  
因为github是代码托管网站，所以有 1G 容量限制，搭建个人博客网站存储百篇文件适合。

技术大白话：  
我想要免费能睡觉的房子（属于自己的网站），拎包即住（要有基本的设施配备，可以有自己的文章图片存放处）。

jekyll先生帮盖好毛坯房（自行搭建出框架，文件夹及文件）及床（一篇示例博客内容），bundle先生帮贴minima主题的墙纸。

so , 我们只需要把自己放进去 ( 文档上传\_post文件夹中 ) 就可以啦！还得去房产交易中心(git上传文件，github分配固定的http地址)登记哟！

<table> 
 <thead> 
  <tr> 
   <th align="right">简单</th> 
   <th align="center">静态</th> 
   <th align="left">博客形态</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="right">无需数据库，评论功能</td> 
   <td align="center">只用Makedown、Liquid、HTML&amp;CSS就可以构建可部署的静态网站</td> 
   <td align="left">自定义</td> 
  </tr> 
 </tbody> 
</table>

# 搭建步骤 #

*  新建项目

在Github上创建空仓库，以你的“[用户名.github.io][.github.io 1]”，例如：[我的仓库名wutiantian.github.io][wutiantian.github.io 2]

在本地电脑终端使用命令jekyll new blog新建一个blog文件夹。  
（注意：blog该词最终将改为上面Github上创建空仓库名，此处只是方便cd切换目录时方便输入。）  
得404.html [about.md][] \_config.yml Gemfile Gemfile.lock [index.md][] \_posts

此时， jekyll 先生任务全部完成。

*  minima主题

命令`bundle show minima`  
显示/usr/local/lib/ruby/gems/2.6.0/gems/minima-2.5.0  
切换到该安装目录下查看ls  
显示assets \_includes \_layouts LICENSE.txt [README.md][] \_sass

把minima文件下的所有文件拷贝到blog文件夹下

cp -r  /usr/local/lib/ruby/gems/2.6.0/gems/minima-2.5.0/* .

此时， bundle 先生任务全部完成。

# 软件环境与环境搭建 #

*  安装软件  
    VMware12 pro、CentOS 7、xshell 5  
    注意：  
    （1）使用VMware pro版本，若下载Player免费个人版本则缺失“快照”功能。这将影响到：配置ip地址时，可能会因为虚拟系统关机等问题重新分配ip地址，需要重新配置xshell的参数。  
    （2）centOS官网下载。“DVD ISO”有4G容量；"Everything ISO"虚拟机下载这个，有4.2G容量；“Minimal ISO”,最小系统。  
    （3）xshell6版本及以后是收费的，下载链接要通过邮箱验证，官方下载速度极慢。建议使用xshell中文版（工具菜单下语言设置，菜单和部分代码提示会变中文）。

Xshell是一个功能强大、十分实用的终端模拟软件，它支持Telnet、Rlogin、SSH、SFTP、Serial等远程协议，让用户能通过互联网直接连接远程主机，在windows界面下就可以轻松完成对linux服务器的控制操作，从而提高在复杂网络环境下的工作效率。  
通过xshell软件远程控制服务器（centOS虚拟机），而不是在嘈杂的机房物理机器上直接操作。  
xshell和securecrt用它们来查看日志、排查定位问题。区别：  
xshell特性：运维都用的xshell，对linux支持好；优点就是能够直接把window的文件拉进linux；有中文语言设置；界面好看。  
securecrt特性：网工都用的securecrt；只有英文版，国内程序员都是汉化版的，常常会出错；

（1）环境准备

*  启动xshell
 *  连接到linux虚拟机  
    在虚拟机上查看IP地址，命令行操作 ifconfig 查看并记录IP地址（注意，不用时挂起虚拟机即可，关机会造成IP地址改变）  
    xshell快捷键【Alt+o】会话窗口，将上一步的IP地址，centOS英文用户名teenie,及权限密码123456输入到会话框。  
    此处的teenie为我在虚拟机上的用户名，只是我个人的英文名，没有特殊功能意义。

（2） 安装配置Git 和VIM参数  
安装命令 sudo yum install -y git vim  
查看安装命令 git --version显示git version 1.8.3.1则为成功

*  安装Jekyll环境  
    centOS里sudo yum install -y ruby安装时2.0版本并不是最新稳定版。  
    Jekyll3.5版本需要ruby新稳定版本

1.root用户下执行yum install -y wget bzip2  
安装wget从网上下载安装包,安装bzip2用来压缩和解压缩工具。两个工具安装很快，内容很小。

2.安装ruby install  
打开github网站，搜索栏里输入“ruby install”  
点击搜索结果“postmodern/ruby-install”  
点进仓库，看markdown文档里内容“Install”下执行语句

wget -O ruby-install-0.7.0.tar.gz https://github.com/postmodern/ruby-install/archive/v0.7.0.tar.gz
    tar -xzvf ruby-install-0.7.0.tar.gz  
    cd ruby-install-0.7.0/  
    sudo make install

三步操作后可以删除压缩包ruby-install-0.7.0.tar.gz

把ruby安装在系统目录下  
ruby-install --system ruby  
过程会比较复杂，会安装ruby依赖包，会下载ruby源代码压缩包，会编译.c文件成为中间.o文件，编译完后会链接，检查系统环境，make生成运行环境后安装。安装时间长10分钟。  
提示：Successfully installed ruby 2.6.2 into /usr/local则安装成功。  
再确认ruby版本 ruby -v得ruby 2.6.2p47 (2019-03-13 revision 67232) \[x86\_64-linux\]

用包管理gem安装jekll，命令为gem install jekyll  
检查命令jekyll --help

若可以运行，会提示jekyll用法、简介：是博客生成器，用ruby语言写的。子命令列表说明，常用命令有new  
常用用法：  
new后跟网站名字即目录名，功能为:产生blog目录下基本框架文件。  
build功能为：生成网站。\_posts文件下多为md及基本文本文件，根据模板将文本内容生成html文件，将文件放到site目录下。  
serve, server, s这三个命令都可以用。serve把网站运行起来，通过http协议来访问他，提供网站预览功能。  
利用jekyll工具，可以在本地linux工作站搭建出网站，通过本地浏览器通过http可以链接到IP地址上

【错误及解决】  
若安装失败，提示：make g++:命令未找到；make:\*\*\*\[binder.o\] 错误 127；make failed,exit code 2  
问题：需要编译一个项目的时候在装g++都装不上  
分析：缺少g++ 。百度一下centos7 g++,查一下yum install哪个安装包  
解决方法：一直提示这个错误，后面参考网上资料用： yum install gcc-c++然后输入g++ -v查看版本

安装gem install bundler

安装完成后，退出root用户，回到普通用户模式。命令exit或者su teenie。

# git的操作初级操作 #

![Git基本三大关系域][Git]

git init

（此时，多了一个隐藏的git文件夹“.git”）

git add .

(add空格后的点，代表“当前目录下左右所有文件”提交到暂存区)

git status

(此时会发现各个待上传的文件名为红色的)

git commit -m "commit"

（此时将文件提交到本地仓库Repository，发现各个待上传的文件名为绿色的）  
到github网站上创建仓库blog与本地同名  
推送

git remote add origin https://github.com/wutiantian/wutiantian.github.io

（此时将本地与远程Remote仓库HTTP地址进行绑定）

git push -u origin master

（此时将本地仓库文件推送到远程Remote仓库中）

此刻，已经完成了博客网站搭建，可以打开你的用户名.github.io博客网址。已经有你yml头上配置的信息。  
将仓库克隆到windows桌面  
命令`git clone https://github.com/wutiantian/wutiantian.github.io`

# 添加个人信息过程 #

住宾馆和自己的家不同，自己的家一定有自己的标记，或是邋遢或是有自己的标记。

> 样式框架,定制定化样式改写  
> 更改\_config.yml文件  
> 把title：的内容改为“吴甜甜的个人博客”，  
> email：的内容改为“wutiantian52@outlook.coms”。  
> （注意，此处的邮箱可以不用是github邮箱账号，没有同步要求）  
> description的下一行正文改为自己的简述：吴甜甜的个人博客网站。欢迎发送邮件技术交流！

# 在windows系统上传自己博客文章 #

> 在框架网页上添加新文章

打开\_posts目录，将md文件放到文件夹下。  
注意将yml头信息复制到文章首行。

> 图片

创建mkdir images  
将图片拷贝到此文件夹

> 上传步骤见： git的操作初级操作， 部分。

# 3分钟建博客站 #

如果感觉搭建过程安装复杂，可直接看后3个部分：git的操作初级操作、添加个人信息过程 、在windows系统下上传自己博客文章。修改yml头信息与上传自己的makedown文章即可。

[wutiantian.github.io]: http://wutiantian.github.io
[GitHub _Jekyll]: https://edu.51cto.com/course/10440.html
[wutiantian.github.io 1]: http://xn--wutiantian-9p4q680fy9s9n9dwu1agc8f.github.io
[.github.io]: http://xn--eqrv6uend.github.io
[.github.io 1]: http://xn--eqr924avxo.github.io
[wutiantian.github.io 2]: http://xn--wutiantian-0b4py51cvi6athkux8e.github.io
[about.md]: http://about.md
[index.md]: http://index.md
[README.md]: http://README.md
[Git]: /images/20220215/b478ea3689af4c85a11073c1d8c6973d.png