寒假开始时把hexo搭建方法简单总结了下分享给了19级的学弟学妹们,随着他们问题的不断增多,解决方案逐渐积累,发现常见的坑也就那几个。形成了一套通用的方法,把它放到这里希望能帮助到更多的人。
介绍
Hexo是一个开源的静态博客系统,使用难度较低,我们借助此项目可以快速上手并搭建一套属于自己的博客系统。
安装Node.js(一个基于V8引擎的JavaScript 运行环境)
在群里下载安装包(node-v12.14.1-x64.exe),默认下一步,直到安装完成。
Win+r cmd 输入 node –v(中间有空格)
可以看到版本号,说明安装成功且环境变量配置正确
在GitHub创建仓库
注册Github账号:https://github.com/(海外网站,访问慢属正常现象)
点New repository创建仓库,主仓库名必须为:你的Github用户名. github.io
以电脑120的GitHub仓库为例(电脑120 GitHub用户名为diannao120),如图所示:
安装&&部署Git
下载安装包(Git-2.21.0-64-bit.exe),默认下一步,直到安装完成。
Win+r cmd 输入 git --version
可以看到版本号,说明安装成功且环境变量配置正确
Git是啥?百度百科这样说:
看不懂没事,我们只需要知道用它可以 在不打开网页的情况下 直接从GitHub下载上传文件就行了。
我们要上传文件,所以需要先绑定自己的github账号
在桌面上右键,点击git bash here
通过以下两条命令设置user.name和user.email配置信息(命令可以直接复制粘贴,需要逐条执行):
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"
其中,引号里替换为你自己的信息。
生成ssh密钥文件:
ssh-keygen -t rsa -C "你的GitHub注册邮箱"
然后直接三个回车,默认不需要设置密码,出现yes/no时输入yes。
生成完成,提示如下:
然后在红框指定的目录找到生成的id_rsa.pub文件。
注意,此pub文件不是office文件,不要用office打开,否则什么都看不到!
使用记事本打开,将内容全部复制。
打开: https://github.com/settings/keys ,new ssh key
tirtle 随便填,本地生成的key粘进去,add..
成功添加后会收到一封邮件,接着我们在git bash里面输入
ssh git@github.com
进一步确认是否绑定成功
当看到下图时,确认绑定成功!
这里之所以设置GitHub密钥是因为,通过非对称加密的公钥与私钥来完成加密,公钥放置在GitHub上,私钥放置在自己的电脑里。GitHub要求每次推送代码都是合法用户,所以每次推送都需要输入账号密码验证推送用户是否是合法用户,为了省去每次输入密码的步骤,采用了ssh,当你推送的时候,git就会匹配你的私钥跟GitHub上面的公钥是否是配对的,若是匹配就认为你是合法用户,则允许推送。这样可以保证每次的推送都是正确合法的。
安装Hexo
Hexo就是我们的个人博客网站的框架, 这里需要自己在电脑里创建一个文件夹,可以命名为hi(随意),Hexo框架与以后你自己发布的网页都在这个文件夹中。创建好后,进入文件夹中,按住shift键,右击鼠标点击在此处打开命令窗口(如果没有,在群里下载“此处打开命令行.reg”并添加到注册表)
使用npm命令安装Hexo,输入:
npm install -g hexo-cli
这里如果一直报错:
可以尝试使用命令:
npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install hexo-cli –g
这个安装时间较长耐心等待,安装完成后,初始化我们的博客,输入:
hexo init blog
注意,这里的命令都是作用在刚刚创建的hi文件夹中。
Warning不用管,红框里的是重点!
我们尝试进入在hi文件夹下生成的blog文件夹,接着输入命令:
hexo s
出现如下界面时,打开浏览器,输入127.0.0.1:4000访问,
当看到网页和Hello,World时,Hexo已经安装成功!
捎带着copy几条常用命令给大家看看:
npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客
命令简写
hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署
hexo server #Hexo会监视文件变动并自动更新,无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存,若是网页正常情况下可以忽略这条命令
这时的博客,只是在你的电脑上安装成功了,别人是看不到的。
推送博客到公网
(以GitHub为例,如果有阿里云/腾讯云/百度云 服务器 访问体验会更好,但推送方法不同)
大家务必区分开两个配置文件:
- 在blog根目录里的
_config.yml
文件称为站点配置文件
- 在themes文件夹,里面也有个
_config.yml
文件,这个称为主题配置文件
我们将Hexo与GitHub关联起来,需要打开站点的配置文件_config.yml
,翻到最后修改为:
deploy:
type: git
repo: 此处需要填写的内容在下图红框内直接复制粘贴
branch: master
注意:这里有两个坑,
其一:
内容粘到配置文件中后要将后三行内容行首加两个空格,表示缩进关系,如下图:
其二,每一个冒号后都有个空格才能填内容!如:
保存站点配置文件。
其实就是给hexo d 这个命令做相应的配置,让hexo知道你要把blog部署在哪个位置,很显然,我们部署在我们GitHub的仓库里。
最后安装Git部署插件,进入生成的blog目录,同样地,按着shift键在在空白处点击鼠标右键,选在此处打开命令窗口,然后输入命令:
npm install hexo-deployer-git --save
部署插件安装完成后,我们同样在blog目录下的命令窗口分别输入三条命令:
hexo clean
hexo g
hexo d
其中第三条的 hexo d
就是部署网站命令,d是deploy的缩写。正常情况下会弹出GitHub信息验证的窗口。
第一行输入你的电子邮箱地址,第二行输入密码,login登陆
如果报错1(无错跳过):
说明deploy插件没装好,npm install --save hexo-deployer-git
重新安装。
如果报错2(无错跳过):
说明GitHub登陆信息没设置好,分别执行
引号里的换成自己的信息。
然后关闭终端再重新打开输入hexo d即可。
完成后,打开浏览器,在地址栏输入你的放置个人网站的仓库路径,即 http://xxxx.github.io
你就会发现你的博客已经可以在网络上被访问了。(http://xxxx.github.io
进不去的话进https://xxxx.github.io
)
基础核心步骤到此结束,接下来接着讲怎么对博客基本的美化、绑定域名、顺便介绍下基本的markdown语法以及如何发布文章。
绑定域名(可选)
和字面意思一样,域名就只是一个名字,比如“baidu.com
”,com是一级域名(顶级域名),它前面的baidu是二级域名,类似的,diannao120.top
中,top是一级域名,diannao120是二级域名。
域名的作用就是方便访问到网络空间。
202.108.22.5
是百度的服务器公网IP地址,显然没有baidu.com
方便记忆,因此百度公司通过给baidu.com
添加一条解析记录指向202.108.22.5
方便大家记忆。
购买域名的渠道有很多,这里推荐阿里云或腾讯云。每年价格几块到几十不等。
以阿里云为例,购买域名后登录到阿里云,进入管理控制台的域名列表,找到你的个性化域名,点击右侧“解析”进入解析:
发现有的小伙伴不会使用ping命令,简单介绍如下(把baidu.com
换成你的 xxxx.github.io
):
第二步,登录GitHub,进入之前创建的仓库,点击settings,设置Custom domain,输入你的域名
点击save保存
第三步,打开本地博客文件夹 ,进入blog/source
,创建一个记事本文件,输入你的域名。最好带有www(以后访问的时候必须带有www完整的域名才可以访问)。
保存,命名为CNAME ,注意保存成所有文件而不是txt文件。
完成这三步,进入blog目录中,按住shift键点击鼠标右键打开命令行,依次输入:
hexo clean
hexo g
hexo d
这时候打开浏览器在地址栏输入你的个性化域名将会直接进入你自己搭建的网站。
更换主题(可选)
如果你不喜欢Hexo默认的主题,可以更换不同的主题,
选择一个你喜欢的主题
diannao120.top/blog
目前使用的是Next主题,可以在blog目录中的themes文件夹中查看你自己主题是什么。
以该主题为例,现在我们要把默认主题更改成Next主题,在blog目录中的themes文件夹打开命令行输入:
git clone https://github.com/iissnan/hexo-theme-next
通用格式:git clone 你想要的主题的仓库页面链接
这是将Next主题下载到blog目录的themes主题下的next文件夹中。打开站点的_config.yml
配置文件,修改主题为next(你想要的主题在themes文件夹的名字)
随后,在命令行分别执行hexo clean , hexo g , hexo d命令,打开浏览器,你将会看到主题已经成功更换。
关于你选择的主题的详细介绍及更多玩法,参考主题发布方在github的介绍文档。
下面贴了几个不同主题的截图:
初识Markdown语法
Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。Markdown语法简洁明了、容易掌握,而且功能比纯文本更强,因此写博客使用它,可以让用户更加专注的写文章,而不需要费尽心力的考虑样式,相对于html已经算是轻量级语言,像有道云笔记也支持Markdown写作。
并且Markdown完全兼容html,也就是可以在文章里直接插入html代码。比如给博文添加音乐,就可以直接把音乐的外链html代码插入文章中。
具体语法参看:http://www.appinn.com/markdown/
可以说十分钟就可以入门。
当然,工欲善其事必先利其器,选择一个好的Markdown编辑器也是非常重要的,这里推荐MarkPad2:https://www.lanzous.com/i7spq7i
这是带有预览效果的编辑器,也可以使用本地的文本编辑器,更多的Markdown的语法与编辑器自己可以搜索了解。
发布文章
hexo new “博文名字 “
命令执行后,
我们会发现在blog根目录下的source文件夹中的_post文件夹中多了一个 博客名字.md
文件,使用Markdown编辑器打开,就可以开始你的个人博客之旅了.
通过带有预览样式的Markdown编辑器实时预览书写的博文样式,
写好后先通过命令 hexo s
然后在本地浏览器打开localhost:4000
预览博文效果。
确认无误后,通过hexo clean
、 hexo g
、hexo d
分别完成清空缓存、生成、部署网页功能。随后可以在浏览器中输入域名浏览。
我们会发现,Github服务器在国内访问速度较慢,如果介意可以考虑购买阿里云服务器(114RMB/年),通过nginx或apache服务搭载云服务器,以加快访问速度。
个性化设置
所谓的个性化设置就是根据个人需要添加不同的插件及功能。
基本的有:
在站点配置文件_config.yml
修改基本的站点信息
依次是网站标题、副标题、网站描述、作者、网站头像外部链接、网站语言、时区等。
在主题配置文件_config.yml
可以修改基本的主题信息。
**基础步骤到此为止,剩下的就等待大家去创造和开拓了!
百度搜索“hexo + 主题名”通常情况下可以找到很多优美的设计!**
例如,https://www.aisun.org/2017/10/hexo-next+dingzhi/ 是某位热心网友对next美化方案的总结。
最后,希望大家可以不断地用自己学到的新东西为电脑120网站添砖加瓦,使之永远保持生机和活力!
版权属于:soarli
本文链接:https://blog.soarli.top/archives/333.html
转载时须注明出处及本声明。
很详细,不错