想搭建一个博客很久了,但最近才着手做了这个事。使用博客记录一下平时自己的学习内容,同时也逼迫自己坚持学习。
这里采用GitHub+Hexo搭建博客,可以选择买一个.com域名(啥域名都被注册了。。退而求其次整个cn吧,还便宜),这样输入URL比较有逼格。记得提前买域名,因为要实名认证审核。
Git下载
首先需要去注册一个GitHub账号,这步省略不说。之后,需要在本地下载一个GitGub客户端,可以去[Git官网](https://git-scm.com/)进行下载,这里最新版本是2.29.2。
安装过程可以配置一些参数,参考链接[参数配置](https://zhuanlan.zhihu.com/p/103325381),安装完成后,在空白处点击鼠标右键,会出现如下图标:
之后打开Git控制台,输入git即可显示安装后的git信息:
绑定GitHub及文件管理
绑定
虽然可以直接使用GitHub进行文件的上传,但是并不是很好用,所以这里还是选择将git与我们的GitGub账号绑定,利用SSH进行文件的传输。
Windows下Git的用法 和用Liunx下进行GitGub管理类似,首先得生成SSH公钥。利用公钥的好处在于不用每次都进行用户的登陆,使用便捷。使用Windows下的git生成SSH公钥、私钥和将其添加到GitGub的步骤如下:
- 一般来说安装选了Git Bash的话,会默认安装SSH。可以打开终端输入ssh命令来查看本机是否装了SSH,如下可以看出已经装了ssh。
未安装可以用命令apt-get ssh安装
- 接着就是对密钥的生成,首先输入ssh-keygen -t rsa命令,表示我们指定RSA算法进行密钥的生成,然后回车后手动输入要保存key的目录和文件,这里不输入选择默认就好(想输入也行,都无所谓)。
这里说明一下在不同系统中,ssh目录的位置:
- Linux:~/.ssh
- Mac:~/.ssh
- Windows 10:C:/Users/username/.ssh
- 然后就可以找到我们的公钥,存储在id_ras.pub中,将其内容复制然后添加到GitHub中即可,可以直接利用控制台进行cat进行查看:
- 去GitHub添加,在Setting下的SSH Keys中,添加完成后如图:
- 紧接着去验证是否成功,键入命令ssh -T git@github.com进行链接,首次验证填yes就好:
文件管理
第一次进行Git仓库的管理,本地是没有git仓库的,这时需要经历如下的步骤,然后使得可以操控远程仓库进行文件管理:
- 首先直接将远程仓库clone到本地
- 然后将文件添加并commit到本地仓库
- 最后将本地仓库的内容push到远程仓库
实际操作如下:
- 首先去打开自己的项目,然后查看项目地址,这里我用到了之前已经使用的仓库:
- 接着利用git clone 命令将远程仓库clone到本地,用SSH链接和URL链接都行:
- clone成功后,找和到本地仓库路径,查看内容是否和远程仓库一致:
- 在当前路径下进行的操作,并不能及时反映到本地仓库和远程仓库,还需要将其git add添加到缓冲区,然后git commit提交到本地仓库,最后再push到远程仓库才算完整步骤,具体操作如下:
- 这里新建一个test.txt的文件作为测试,利用vim编辑test.txt,并随意写入一段内容,然后利用git status命令查看仓库状态:
上述可见,会提示刚刚创建的测试文件test.txt并没有被追踪,所以接下来还需要将文件添加到“临时缓冲区”,然后才能进行commit操作,第一次进行提交操作会提示输入用户名和密码,正常输入后即可完成提交,这里记得在commit时,用-m参数对于提交操作进行描述,方便后续进行日志查看:
- 想要查看提交状态,课可以使用命令git log进行提交日志的查看:
- 最后利用命令git push origin master将本地仓库提交到远程仓库,其中origin是远程主机的名字,这里我在提交时遇到一个问题”failed to push some refs to git”
该报错主要问题是在这期间对github上的远程仓库进行了修改,所以要用命令git pull –rebase origin master进行更新,然后再次提交即可成功:
打开github进行查看,确实是提交成功:
- 另外要想删除一个文件利用git rm命令,具体操作可以参考下图:
其余还有很多操作命令,留待大家自己琢磨。
安装node.js和Hexo
在Node.js官网下载最新的node.js,然后进行安装,傻瓜式Next安装操作,这里注意最好还是安装在C盘之外的盘符中,完成后cmd命令行验证是否有环境变量,验证是否安装成功:
然后我们需要配置一下npm在安装全局模块时的路径和缓存cache的路径。默认情况下,在进行模块安装时,路径为C盘,所以需要手动修改到其它盘。具体操作是:
- 在node.js的安装目录下,新建两个文件夹node_global、node_cache:
- cmd中键入命令
1 | npm config set prefix node_global_path |
- 在系统变量下新建一个变量,变量名为”NODE_PATH”,变量值为”D:\Program Files\nodejs\node_modules”。并将nmp对应的路径修改为”D:\Program Files\nodejs\node_global”
- 验证测试,利用命令npm install -g webpack-cli 安装webpack模块进行测试,成功安装后该模块被放在了我们新建的node_global中:
这里要注意,为什么我要安装webpack的CLI,因为在webpack3中,webpack本身和他的CLI都是在一个包中的,但是在最新的webpack4中,这两者被分开了,如果用webpack单独安装,查看版本时会显示如下错误,提示CLI不存在。这种情况下若想使用webpack命令,需要进入“node_modules/.bin/webpack”才能执行命令:
所以需要全局安装webpack-cli,这样就不需要进入bin目录,和之前版本操作就一样了,这里如果已经单独安装webpack了,可以使用如下命令重新安装webpack-cli:
Hexo的安装
- Hexo是搭建个人博客最常用到的框架,通过npm install -g hexo-cli进行安装。新建一个Blog文件夹,然后Git Bash终端进入Blog目录,键入npm命令安装Hexo,因为有墙的关系,所以经常会安装错误,可以手动修改一下源地址为淘宝的NPM镜像源:
1 | npm config set registry http://registry.npm.taobao.org/ |
- 安装完成后输入hexo init命令进行初始化,如果卡在下述提示不动,说明因为墙导致从github下载hexo库出问题,可以选择切换一下手机热点(简单,亲测有效),或者设置一个github代理:
- 之后用hexo g进行静态部署:
- 网页部署完成后,用hexo s命令运行server,然后查看localhost:4000即为博客网页:
将Hexo部署到GitHub
- 首先我们得去GitHub上创建一个对应的仓库,要注意对于仓库的名称尽量写为
用户名.github.io
的形式(一定记住用户名命名),不然会存在一些问题。因为这个名称会对应博客的网站,而且博客的图片显示有问题(亲测),所以建议还是用我上面那个方式命名,除非你买个域名。创建成功后拿到仓库地址。
在setting下找到GitHub Pages,将Source设置为master
- 然后就是将hexo部署到GitHub上,首先找到我们的Blog文件夹,打开_config.yml文件进行编辑:
在文件末尾处添加如下内容,主要是自己的仓库地址:
- 接下来就是在Git Bash中安装Git部署插件,在Blog下执行npm install hexo-deployer-git –save:
- 完成后,使用如下三个命令进行部署三步曲:
1 | hexo clean //清除缓存文件db.json和已生成的静态文件public |
完成后使用 https://用户名.github.io即可登陆到博客
购买域名并绑定
现在的域名是带了github.io的,比较low,还是尽量花点钱买一个喜欢的域名,这样访问时也比较有逼格。
我这里选择阿里云进行购买,由于我想要的.com域名被注册了。。。只能选个.cn域名了。买域名步骤就不记录了,有钱就行,记得实名认证。
解析域名:
- 实名认证后,接着就是去解析一下域名,找到应列表中已购买的域名,解析进入:
添加两个记录(主机记录分别为@和www),其中ip地址为之前的 用户名.github.io的地址,可以去ping一下获取,示例如下:
- 接着去Blog/source下添加一个CHAME文件,写入域名,这里不加www就可以做到访问不带www也可以访问到:
- 然后部署三步曲,这是后去GitHub上看,CHAME被添加到了项目中,打开setting,下拉就可以看到域名已被添加了:
如果在项目中没有CHAME文件可以自己手动添加一个,只要保证上述domain中有自己的domain就行。
- 就这样,输入hskull.cn即可到达我的博客:
更换主题
默认的主题肯定是要换的,这毋庸置疑。hexo有很多开源的主题可以使用,可以自己去进行挑选喜欢的,作为一个技术分享为主的博客,那主题简洁明了就好,所以还是选择了最经典的NexT。(换主题了,推荐Butterfy,就是我现在用的主题,非常好看,真香。)
下载NexT主题,下载最新版本的主题,我下载时为NexT v7.8.0,GitHub地址:/theme-next/hexo-theme-next。
注:一些教程依旧是NexT V5的版本,其仓库为lissnan,依据官方说法,我们还是使用新版的为好,之前我下的旧版本就有很多错误。
主题的配置都似乎将主题克隆到Blog下的themes目录,所以我们进入Blog目录下,执行如下命令进行克隆:
1 | git clone https://github.com/theme-next/hexo-theme-next themes/next |
如果出现下述错误:
修改为下述命令再次下载:
1 | git clone git://github.com/theme-next/hexo-theme-next themes/next |
- 任何教程中都会提及两份重要的配置文件,名称为
_config.yml
,分别为:- 位于站点根目录下的站点配置文件,用于网站的基础配置
- 位于themes目录下的主题配置文件,用于主题相关的配置
当下载好主题后,先进行一个初步配置使得主题上线,看看效果。先打开站点配置文件,修改基础信息和设置主题:
1 | # Site |
然后打开主题的配置文件,搜索Schemes,然后选择一个风格,几个风格介绍如下:
1 | Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白 |
- 使用旧版的hexo后,完成上述配置后,进行部署三步曲,完成后去打开博客,就呈现了如下的效果:
失败了,查询原因后发现时是hexo再5.0之后把swig给删除了,它是JS模板引擎,用于渲染页面,执行命令npm install hexo-renderer-swig下载,之后继续部署,显示成功:
所以建议还是下载hexo 6.x之后版本。
进行到这一步后,你应该已经迫不及待的想发布一篇文章看看了,如果想继续美化界面,可以去参考网上大佬们的教程,这里不再献丑。
发布第一篇文章
- 使用命令创建文章:
1 | hexo new [layout] <title> |
该命令会在/sources/_posts下创建一个title.md的文件,然后就可以编辑md文件写自己的文章了。也可以直接将写好的md文件放入对于目录下,配置号下述属性即可。
- 打开创建的模板md文件,开头可以看见三个模板的配置属性,进行配置:
另外还有一些其它的配置(Scaffold)如下:
参数 | 描述 |
---|---|
layout | 布局 |
updated | 更新日期 |
comment | 开启文章的评论功能 |
categories | 分类 |
permalink | 覆盖文章网站 |
keywords | 仅用于 meta 标签和 Open Graph 的关键词(不推荐使用) |
- 接下来hexo s本地测试一下,成功完成文章发布:
你也可以部署三步曲进行部署,然后用域名进入测试,结果一般都是ok的。