作为一个前端儿当然想有一个自己专属域名的网站,但是现在还在前端门口瞎晃的我显然还干不了这件事,于是就寻思着先借助GitHub pages搭建一个专属自己的博客,这种相比其他博客网站更自由,所以大家就自由发挥啦,搭建好博客后,有前端基础的就可以任意设计自己的博客页面,不懂前端的也不难,只要看着教程或者直接应用hexo的博客主题就行,其中可能会出现很多问题和很多坑,但这也是一个学习的过程,我就遇到了n多问题。
一.搭建环境准备(以下都在windows系统上)
Node.js安装和准备
git的安装和准备
GitHub账户的配置
1.配置Node.js环境
安装地址(LTS为长期支持版,Current为当前最新版)
下载好后直接一路默认安装即可,不过在custom setup这一步记得选 Add to Path,这样我们就不用自己在电脑上配置环境变量了。下面测试一下组件是否安装好,在windows运行窗口输入以下命令:
node -v
2.配置git环境
git安装(可能需要翻墙)
推荐:国内镜像安装(一路默认安装即可)
下面测试是否安装正确,打开git命令行输入下面命令:
git --version
如果如上图所示,说明安装正确
配置ssh:打开git bash终端设置user.name和user.email,输入以下命令(名字和邮箱都写你自己的):
$ git config --global user.name"Your Name"
$ git config --global user.email"email@example.com"
因为Git是分布式版本控制系统,所以每个机器都要有自己的名字和email。再输入以下命令生成ssh密钥:
ssh-keygen -t rsa -C "email@example.com"
此时在user文件夹下会生成一个.ssh文件,里面有刚刚创建的ssh密钥文件id_rsa和id_rsa.pub。运行该命令后会提示让你输入push文件时的密码,当然你可以直接回车到时候push文件就不用输入密码了,可以直接提交到github上了。
下面将ssh key添加到你的github上:首先你需要拷贝 id_rsa.pub 文件的内容,然后登陆你的github账户,从右上角setting进入以下界面,找到SSH and GPG keys选项,最后将你之前拷贝的东西复制到ssh keys下面的文本框里,点击Add SSH key(添加SSH)按钮就好了。
3.github账户的注册及配置
注册:(若已有github账户请自动跳过)打开链接https://github.com/注册即可,记得注册完一定要去自己邮箱确认注册,不然用不了github pages。
创建代码库:登录之后点页面右上角加号new repository进入代码库创建页面
在Repository name下填写yourname.github.io(例如我的账户名是yanzhanger,那我就填写yanzhanger.github.io),这个以后将作为你博客的URL。在Description下填写简单描述(例如my blog site)不写也行。
代码库设置:正确创建代码库之后将会看到以下界面
接下来开启github pages功能,点击界面右侧Settings进入设置界面,向下拖动找到Github Pages选项
然后点击choose a theme进入选择一个自己想要的主题就可以了
这时github将会为你创建一个github pages界面,如果配置没问题大概15分钟后你就可以访问你的yourname.github.io这个网址了。至此,我们搭建博客的环境已经配置好了。
二.hexo博客框架的安装和配置
hexo:是一个快速简洁的博客框架,我们只需要用hexo的一些命令用git把代码提交到github上并且开启github pages就可以访问自己的博客了。
1.hexo安装:在你电脑任意盘下创建一个文件夹,打开文件夹在空白地方右击打开git bush命令行。
安装方法一:用npm安装,在你的命令行中输入以下命令(分开输入):
npm install hexo-cli -g
npm install hexo --save
(npm 安装就是我遇到的坑,好像最近国内npm源有问题用不了,所以只能用淘宝源安装了,推荐用方法二安装吧。)
安装方法二:用淘宝源安装,在命令行输入
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install hexo-cli -g
然后你会看到刷了很多行白字不用管,输入下面命令检查是否安装好:
hexo -v
如果显示下面界面说明安装好了:
2.hexo配置
初始化hexo:
hexo init
然后安装你需要的组件输入命令
cnpm install
至此hexo就安装好了,下面来体验一下hexo,同样是在命令行输入:
hexo g
显示如下界面:
然后输入:
hexo s
会显示:
于是我们打开localhost:4000会看到界面
敲重点了:又是一个坑!万一你打不开这个界面怎么办?这里解释一下hexo默认的接口是4000,但是如果你的电脑上装了不明软件霸占了这个接口,那你hexo就得手动换个接口了(例如5000)输入以下命令试试:
hexo s -p 5000
这时在浏览器中输入地址localhost:5000就可以看到这个界面了。
敲重点:说一下hexo常用的几个命令:
hexo s:启动本地服务器,用于预览主题。对 Hexo 根目录 _config.yml 的修改,需要重启本地服务器后才能预览效果。
hexo clean:清除缓存文件 db.json 和已生成的静态文件 public(网站显示异常时可以执行这条命令试试)
hexo g:生成网站静态文件到默认设置的 public 文件夹。
hexo d:自动生成网站静态文件,并部署到设定的仓库。
三.将hexo与github pages联系起来
打开之前创建的文件夹里的_config.yml文件,找到Deployment,然后按照如下配置:
deploy:
type: git
repo: git@github.com:yourname/yourname.github.io.git
branch: master
注意将yourname改为你在github上建仓库的名字。
敲重点:yml格式非常严格,一定要在type,repo,branch后加一个空格。
至此所有的环境都配置好了,用git命令输入hexo clean,hexo g,hexo d就好了。下面就可以用yourname.github.io访问你的博客主页了。
踩坑注意:这里需要提前安装一个扩展。
npm install hexo-deployer-git --save
如果没有安装的话,将会提示:
deloyer not found:git
四.配置hexo主题
如果我们在浏览器中输入yourname.github.io进入博客主页,那我们目前看到的界面将会是hexo默认的landscape主题,我们可以按自己的喜好安装配置不同的主题,现在推荐知乎上几个star比较高的主题:
1.next主题(这个主题可以自己自由发挥设置自己的博客界面,推荐有前端基础的人用)
2.yilia主题(这个主题很简约,配置起来也很方便)
3.casper主题
4.uno主题
5.modernist主题
我们只需要在github上将这些主题文件download下来,然后放在你文件夹的themes文件夹中就可以了,最后在站点配置文件config.yml找到关键字theme,将其后面的主题改为你要配置的主题即可,然后hexo s后就可以预览你的博客主页了。最后hexo clean,hexo g,hexo d便可以在你的yourname.github.io的域名网站访问你的博客主页了。
关于next主题的配置我将在后续说明。