个人博客搭建过程整理

Published: by Creative Commons Licence

个人博客的搭建过程

Github个人博客

Created 2018.02.16 by William Yu; Last modified: 2018.07.13-V1.0.2

Contact: windmillyucong@163.com

Copyright ©2018 William Yu. All rights reserved.


————————————————2018.02.16日志——————————-

碎碎念

看到两个很漂亮的个人博客网站

http://bryceyang.github.io

http://cenalulu.github.io

打算自己也做一个我自己的。(毕竟去年就打算制作个人博客,买了域名后来几乎忘记了,刚好今天发现了Github这么棒的功能)

流程

本地服务器

【0】安装jekyll

【后来发现不是必要的,安装jekyll是为了能本地运行服务器,浏览器里面访问http://localhost:4000/立即查看你的网页效果】

【再后来又发现bundler和jekyll没有不行哇!在编辑自己的网页的时候,想立即查看效果,开个服务,稍微做一点改动就在浏览器里面立即能看到效果,总不能每次都gitpush到github上面去,再看效果吧!愚蠢的我】

$:sudo gem install bundler   
$:sudo gem install jekyll 
ERROR:  Error installing jekyll:     
ERROR: Failed to build gem native extension. 

解决办法

$:rby -v    #查看版本
$:sudo apt-get install ruby2.3-dev  #安装对应版本的

Git的使用

【1】fork这个项目https://github.com/yizeng/jekyll-theme-simple-texture#fork-destination-box

【2】git clone git@github.com:[YOUR_USERNAME]/jekyll-theme-simple-texture.git

【3】删掉两个文件

删的哪两个忘记了=_=为什么删也忘记了++(毕竟2018.07.13时隔五个月才开始整理当时的笔记)

【4】改Gemfile文件

【5】进入那个项目文件夹(有Gemfile文件的地方),然后$:bundle install

要等待几分钟,并且安装一些东西,所以还要输入linux的用户密码,神烦。

【6】输入下列指令开启本地服务器,即可浏览器输入http://localhost:4000使用本地服务器访问了,可以查看效果。

$:bundle exec jekyll serve

【7】Github上创建一个空项目,命名为YuYuCong.github.io

注意项目名称一定要是你的“用户名”+“.github.io”的形式。

####【8】然后终端操作:

第一次上传Git
#git简单教程  https://linux.cn/article-9319-1.html
#先在Github网页版上创建一个仓库,命名为YuYuCong.github.io
#然后进入终端:

will @ Will in ~/Documents/myHomePage [19:01:55] C:1
$ mkdir YuYuCong.github.io

will @ Will in ~/Documents/myHomePage [19:02:34]
$ cd YuYuCong.github.io 

#先把刚才修改了的jekyll-theme-simple-texture文件夹里面的东西复制进刚才新建立的个人博客git项目文件夹

#然后接着在终端
will @ Will in ~/Documents/myHomePage/YuYuCong.github.io [19:03:17]
$ git init

will @ Will in ~/Documents/myHomePage/YuYuCong.github.io on git:master x [19:03:28]
$ git add -A

will @ Will in ~/Documents/myHomePage/YuYuCong.github.io on git:master x [19:03:45]
$ git commit -m "upload"
[master (root-commit) c3d17c2] upload

will @ Will in ~/Documents/myHomePage/YuYuCong.github.io on git:master o [19:04:31]
$ git remote add origin https://github.com/YuYuCong/YuYuCong.github.io
#第一次提交需要这一句命令,添加远程仓库链接,往后的提交就不需要再运行在这一句命令了。

will @ Will in ~/Documents/myHomePage/YuYuCong.github.io on git:master o [19:05:14]
$ git push -u origin master 
Username for 'https://github.com': windmillyucong@163.com
Password for 'https://windmillyucong@163.com@github.com': 不会告诉你的
Counting objects: 3, done.
Writing objects: 100% (3/3), 225 bytes | 225.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/YuYuCong/YuYuCong.github.io
- [new branch]      master -> master
  Branch 'master' set up to track remote branch 'master' from 'origin'.
之后每次的更新,上传Github
$:git add -A
$:git commit -m "demo test"
$ git push -u origin master 

【9】绑定域名

当然不绑定域名也是可以的,你完全可以使用https://yuyucong.github.io访问个人博客,记得把我的名字换掉。

我的域名williamyu.top,域名是之前购买的,没有域名也完全可以的:。

去阿里的域名控制台:https://netcn.console.aliyun.com/core/domain/list

添加解析,CNAME类型,记录值填github的二级域名,yuyucong.github.io

然后在YuYuCong.github.io文件夹里面新建一个文件:CNAME

没有后缀!没有后缀!

里面填上williamyu.top就可以了。

然后再次上传到github:

$:git add CNAME
$:git commit -m "add CNAME"
$ git push -u origin master 

结束,等几分钟,可以访问了。

————————————————2018.02.17日志——————————-

博客上传

错误示范

现在又开始做前端了!啊哈哈。

【错误示范:】_site文件夹里面的各种index,html文件,双击浏览器打开,F12按一下,打开源码,一个个标签打开找对应的前端的文字图片元素出来,同时VIM修改一下源码,网页刷新,成功,满心欢喜以为自己的博客搭建成功。

记录一下模板的位置

  • home主页的标题和签名:./_site/index.html的70和71行。

【注意:后来发现上述方法,不行!_site文件夹已经文件夹里面的东西都是bundle exec jekyll serve命令之后根据项目文件里的其他文件生成的。改了 _site文件 一旦关掉上述服务再打开,又会恢复原样!】

当我费尽心力想着学Html,打造自己的网站,编写这里面第一篇博客的时候,突然想起来,Markdown可以导出网页!【后来发现这也不需要】

正式开始

【1】Demo源:https://github.com/yizeng/jekyll-theme-simple-texture

【2】作者的优质博客:http://yizeng.me/

源:https://github.com/yizeng/yizeng.me

【3】别人借此模板创建的博客:https://bryceyang.github.io/

源:https://github.com/bryceyang/bryceyang.github.io

  • 【页面改造】

    【1】页面标题旁边的logo,放置在/目录下,命名为favicom.ico即可。

    【2】打开_config.yml文件,填写相关信息。24行 25行 26行 27行 30 33 38 50 51 52 56 59 60 61行。所以真的很方便,Demo的作者真的很大佬。

    【3】打开/_data/i18n.yml文件,删除两个theme_info,增加两个copyright标签

    【4】然后打开/_includes/blog,把theme_info改成copyright

  • 【博客加载】

    最终发现只要把博客md文件按照一定的格式放进_posts文件夹就可以自动加载了,里面已经有3个demo,复制一个demo,把博客贴在表头下面即可。综上,我的博客其实就是Markdown语法。。。。

————————————————2018.02.18日志——————————-

再增加一个404.html。

更改一下主页,index.html。原demo的主页改名字成了index[1].html备份在文件夹里面。

————————————————2018.02.19日志——————————-

添加.gitignore文件

前面已经说了,_site文件夹是本地服务地运行的缓存文件,所以没有必要上传到github上面去,怎么解决呢?然后有个好东西.gitignore

终端运行

$: vim .gitignore

然后写入格式:

/.gitignore
/_site

/即忽略/后面的文件和文件夹。

然后打开终端,再次提交

$ git add -A #注意这里-A 的意思是添加文件夹下所有目录所有文件,但除了.gitignore文件中所列
$ git commit -m "add .gitignore"
$ git push -u origin master

—————————————————-后续—————————————-

后继改进:

不断摸索的过程中也学到了很多东西,开始直接上手编写源码。

后续自己动手修改了主页,添加了LOFTER博客挂载点,插入了csdn,gitee,github等链接。csdn的UI界面还有点问题,暂时没时间更新了。

TODO

​ 由于毕竟不是科班出身,前端技术,基本上不打算深入挖掘了。目前为止,只进行了一部分html,css,js脚本的探究,markdown语法的使用,详细的css,js脚本,php都没有做深入探究,等待日后闲暇再接着研究吧。

​ 我时常在想我为什么喜欢探究一些似乎旁门左道的东西——姜文为什么会去拍电影?他说:“我有时候看别人的电影,时常会想他这电影拍的怎么样?这不能算是太好吧?要不我弄一个得了。“ 其实我对自己喜欢的东西的探究,也就这么回事。姜文是我最喜欢的导演之一。

Reference

[1] https://github.com/yizeng/jekyll-theme-simple-texture#fork-destination-box

Contributing / Contact

Have anything in mind that you think is awesome and would fit in this list? Feel free to send a pull request.

Feel free to contact me anytime for anything.


License

CC0