在Github上搭建个人博客网站

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/Joseph_Thunder/article/details/93378476

前言: 刚开始尝试用Python做项目,遇到问题常常穿梭于各大博客寻求解决,继而萌生了自己写博客的想法。我们可以在博客分享做项目遇到的坑,也可以对自己学到的知识进行梳理。作为一个爱学(zhuang)习(B)的程序员,在Github上搭建自己的个人博客也是一个不错的选择,当参考着别人的教程,成功地把博客搭建起来了,第一篇博文也就有素材了。

一、前期准备

  1. GitHub官网上注册自己的账号,用户名还是要好好取的,毕竟跟博客域名有关。
  2. 安装Git,直接到Git官网下载安装就行。(个人感觉Git还真的是一个好用又强大的版本管理工具)
  3. 安装node.js环境,可以到node.js官网下载自己系统对应的版本进行安装。

二、建立仓库

登陆GitHub,在头像隔壁的加号点击 New repository,新建一个代码仓库。
New-repository
进入代码仓库创建页面,Repository name 填入username.github.io,其中username是自己的名字,最好跟注册GitHub时的用户名一致,当然,不一样也可以,受影响的只是访问博客的地址。
Repository-name
填写好仓库名后,点击下方的Create repository创建代码仓库。
创建成功之后,点击Setting
Setting
其中Rename是更改仓库名,说不定你会用到。
拉到下面,找到GitHub Pages,访问博客的网址在这里。
Github-page

三、安装及配置Hexo

安装Hexo

Hexo是一个快速,简介高效的博客框架,支持Markdown,拥有强大的插件系统。
选择一个自己认为合适的地方建立自己博客的站点文件夹,用来存放博客的站点文件。
在此文件夹内右键Git Bash Here(这个需要安装了Git才有的),并在命令行输入:

npm install hexo-cli -g

可能会看到一个Warning,不用担心不影响使用的。(只要不是Error就行,程序员都是不关心Warning的,完美主义(Qiangbozheng)的当我什么都没说过)
然后命令行继续输入:

npm install hexo --save

安装完之后,在命令行中输入hexo -v测试一下,能看到hexo的版本即安装成功。

配置Hexo

在博客站点文件夹内右键Git Bash Here。(如果刚才没有关掉Git Bash就不用重新打开)
使用前先初始化Hexo,在命令行输入:

hexo init

然后在命令行继续输入:

npm install

这里npm将会自动安装所需要的组件。

窥视Hexo

想要预览一下Hexo的博客页面,先要生成静态网页,在命令行输入:

hexo generate

然后是运行本地服务(平时调试也是用这个),在命令行继续输入:

hexo server

可以在命令行看到:

$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000. Press Ctrl+C to stop.

浏览器输入 http://localhost:4000,即可看到Hexo博客页面。(Hexo的默认主题是landscape)
hexo-server

四、将博客部署到Github

配置Git的个人信息

再次来到博客站点文件夹,右键Git Bash Here
Git的个人信息,其实就是用户名和邮箱,在命令行依次输入:

git config --global user.name "uesrname"
git config --global user.email "email"

其中usernameemail就是注册GitHub时的用户名跟邮箱。

添加SSH密钥到GitHub

先要生成SSH密钥,在命令行输入:

ssh-keygen -t rsa -C "email"

这里的email同样是注册GitHub的那个邮箱,一直回车直到命令结束。
然后默认会在C:\Users\username.shh中会生成两个文件,分别是id_rsaid_rsa.pub
id-rsa
将整个.ssh文件夹拷贝到Git的安装目录下。
拷贝ssh key到剪切板(待会可以直接粘贴的),在命令行输入:

clip < ~/.ssh/id_rsa.pub

登陆GitHub,在头像点击的Settings
settings
然后选择左边的SSH and GPG keys,再点击New SSH key,之后会出现添加页面。
ssh-key
在Title里给这个ssh key起个名字,在下面Key里粘贴刚才拷贝的ssh key,然后点击 Add SSH key
检验一下刚才添加的SSH,在命令行中输入:

ssh -T [email protected]

当出现”Are you sure you want to continue connecting?”时输入”yes”,当出现”hi …! you are successfully authenticated,…”的时候,就成功了。

配置部署信息

在博客站点文件夹中找到_config.yml,打开并找到Deployment,修改如下:

deploy:
  type: git	#使用Git发布
  repository: https://github.com/username/username.github.io.git	#创建的GitHub仓库地址
  branch: master	#部署的分支

其中repository就是代码仓库的克隆地址。

执行部署

首次部署需要先安装一个扩展,命令行输入:

npm install hexo-deployer-git --save

然后执行Hexo的生成、部署命令:

hexo generate	#生成
hexo deploy	#部署
hexo d -g	#在部署前先生成

出现”INFO Deploy done: git”,就说明部署成功了,然后就可以通过博客网址访问自己的博客了。

deploy-blog

五、博客的更新与维护

博客的更新与维护,实际上是指新文章的持续发表,以及对旧文章中已知的错误进行修正,这样才能维持自己博客的活力。基于Hexo搭建的博客是支持Markdown编辑的,所以对文章的编辑、排版等操作不算太复杂。
在博客站点文件夹,右键Git Bash Here,在命令行输入:

hexo new "blog_article"

这样就新建了一篇名为blog_article的空白博客文章,在博客站点文件夹,有个名为source的文件夹,是存放博客文章Markdown源码的。用Markdown编辑器编辑_posts里的.md文件,编辑好之后生成静态网页,然后部署到Github,在命令行输入:

hexo generate	#生成
hexo deploy	#部署

随后通过博客网址访问自己的博客,刷新了就好。

写在最后: 关于Hexo博客框架还有很多玩法,例如更换主题、添加访问量记录、添加评论功能等等,可以自己挖掘一下,稍微发挥一下程序员的探索精神。

猜你喜欢

转载自blog.csdn.net/Joseph_Thunder/article/details/93378476
今日推荐