hexo solar主题 + github搭建个人博客(一)----项目搭建、配置主题、绑定域名
个人博客:小景哥哥
说明:本人使用的是Mac系统,一切步骤都是基于此来构建的。
1. 环境准备工作
- 安装
homebrew
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
- 安装git
brew install git
检查git
安装成功与否
git --version
控制台会输出:
git version 2.20.1
- 安装
node.js
brew install node
检查node.js
安装成功与否
node -v
控制台会输出:
v11.6.0
2. 安装Hexo
前面我们已经安装了node.js
,这里我们使用npm
命令来安装Hexo
npm install -g hexo-cli
在任意位置创建一个文件夹,如blog
,cd
到该路径下执行以下命令:
hexo init
该命令会在目标文件夹内建立网站所需要的所有文件。接下来是安装依赖包
npm install
到这里本地博客就搭建好了。执行以下命令(在你博客的对应文件夹路径下,比如上面的blog
)
hexo g
hexo s
在浏览器输入http://localhost:4000/
就可以进行查看了。
当然这个博客是本地的,别人是无法访问的,之后我们需要部署到github
上。
3. 登录Github
账号并新建仓库
在页面右上角点击加号,创建新的仓库。
仓库名称为你的github
名字后面加上.github.io
,比如我的github
账号名是jinglisen
,创建的仓库名是jinglisen.github.io
,只有这样在后面访问的时候,浏览器地址栏输入jinglisen.github.io
就可以访问博客,否则会在后面加上一个仓库名字,比较不好看,当然对于使用域名解析的,不用考虑这个问题。
4. 配置SSH Key
这一步不是必须的,配置SSH Key
的话之后每次更新博客就不用都输入用户名和密码,可以方便一些。
以下是详细配置过程。
(1)检查本机上是否已经存在SSH Key
打开终端,输入如下命令:
cd .ssh
ls -la
检查终端输出的文件列表中是否已经存在id_rsa.pub
或 id_dsa.pub
文件,如果文件已经存在,则直接进入第三步。
(2)创建一个SSH Key
配置一个全局名字和邮箱:
git config --global user.name “Firstname Lastname”
git config --global user.email "[email protected]"
在终端输入如下命令:
ssh-****** -t rsa -C "[email protected]"
按下回车,让你输入文件名,直接回车会创建使用默认文件名的文件(推荐使用默认文件名),然后会提示你输入两次密码,可以为空。
(3)添加SSH Key
到github
如果你没有指定文件名(也就是使用的默认文件名),那么你的.ssh
文件夹下,应该有一个id_rsa.pub
文件了,打开该文件,复制里面的文本。然后登录github
,点击右上角头像右边的三角图标,点击Settings
,然后在左边菜单栏点击SSH and GPG keys
,点击New SSH key
,Title
随便填一个,在Key
栏填入你复制的内容,点击Add SSH key
,就添加成功了。
(4)检验SSH Key
是否配置成功
在终端输入如下命令:
ssh -T [email protected]
如果出现:
Are you sure you want to continue connecting (yes/no)?
请输入yes再按回车。
如果最后出现:
Hi username! You've successfully authenticated, but GitHub does not provide shell access.
就说明你的SSH Key
配置成功了。
5. 同步本地博客到Github
编辑自己创建的本地博客文件夹中的_config.yml
中的deploy
节点
deploy:
type: git
repo: [email protected]:username/username.github.io.git
branch: master
注意:repo
为这种形式的是配置了SSH Key
之后的,如果没有配置则使用Https
形式的地址。
为了能够使Hexo
部署到GitHub
上,需要安装一个插件
npm install hexo-deployer-git --save
然后输入以下命令
hexo clean
hexo generate
hexo deploy
在浏览器输入username.github.io
就可以访问你的博客了。
注:hexo
常见命令:
hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo p == hexo publish
hexo g == hexo generate#生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy#部署
hexo g -d #生成+部署
hexo clean #清除原有生成信息
6. 设置hexo
主题
hexo
官网上有特别多的主题可供选择,针对于博客,最流行的是next主题,只是个人觉得特别丑,经过精挑细选,我选用了solar主题,是一个星系的动态转动页面,总体风格是暗黑色的,正文字体是灰白色的,标题是绿色的,而且该主题的页面布局和搭配都特别美观。更多主题请查看hexo
官网。
通过github
下载solar主题。
把下载的文件夹取名为solar
,并放在博客的themes
文件夹中,比如我的项目在blog
文件夹中,对于存放位置为:
配置solar
主题,在项目路径下使用sublime
打开并修改_config.yml
文件:
把该文件中的theme
改成solar
:
重新生成页面信息,并启动,输入以下命令:
hexo clean
hexo g -d
在浏览器输入http://localhost:4000
即可访问solar
主题页面。
8. 绑定域名
在阿里云购买自己喜欢的域名,比如我购买的就是jinglisen.fun
,这里给的建议是,可以购买top
国际域名,便宜划算,cn
的只能在国内访问,com
的又太贵,最好购买8
块钱一年的那种国际域名。fun
域名是一个专门针对泛娱乐行业(游戏,音乐,电影,图书,户外,时尚,旅行等)打造的顶级域名,首年8
块钱,个人感觉此域名鲜明好记,而且实惠,主要也是顶级域名,所以一下子买了10
年的,179元。
登录阿里云控制台进行域名解析
这里需要添加两个解析,一个www
的,一个@
的,二者均为CNAME
,并且记录值均为jinglisen.github.io
,特别注意不要解析成ip地址,因为GitHub
上ip
地址是经常变化的,即使刚开始ip
解析成功,一会儿就失效了,一定要解析成jinglisen.github.io
,也即是上面步骤所设置的值,其中jinglisen
是变化的。
在项目的目录下,找到source
文件夹,在该文件夹中添加一个CNAME
的文件,内容是jinglisen.github.io
,其中jinglisen
是变化的,根据自己的github
名称设定。
为了使用安全的https
解析,在自己github
的博客项目中找到setting
,在前面打上勾然后强制使用HTTPS
解析:
重新生成页面信息,并启动,输入以下命令:
hexo clean
hexo g -d
貌似基本上立马就可以访问了,只有你的域名信息登记完成,比如你的阿里云控制台有之前域名的个人信息,直接使用模板,申请实名认证即可,实名认证成功即可访问。
当你输入jinglisen.github.io
的时候,会直接解析成www.jinglisen.fun
,在外观上来看,和使用自己的服务器搭建的博客一样,比如我的之前的自己服务器搭建的博客:小景哥哥先前博客,当前搭建博客。
后序会更新怎么配置和使用solar
主题,设置一下自己想要的导航栏和文章,并且使用hexo-admin
来管理发布修改博客,这是提供浏览器图形界面的,可以省去完全敲命令行的苦恼。