之前用新手价买过腾讯的域名和空间,用于搭建个人博客。后来呢?后来腾讯要我续费,还不给打折。预支给女友买糖的钱来买服务器良心不会痛吗?
但是,有一个属于自己的博客网站真的是比拥有一个可爱女友更幸福的事啊。于是在看了几篇博客后,我选择了用Hexo和码云来搭建个人博客
简介
Hexo: Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
码云pages: 码云pages是一个静态网站托管地方,再加上码云本来就是个代码托管的地方,集成pages后,可以很方便的部署你的代码
开始搭建
一、配置Hexo
- 安装git
在cmd中使用git --version来查看git是否安装成功
- 安装node.js
在cmd中使用node --version来查看node.js是否安装成功
- 安装Hexo
用到node.js中的npm命令
在电脑桌面任意位置鼠标右键,打开Git Bash Here
输入命令:npm install -g hexo-cli
安装完成后输入hexo会得到下面这个页面
二、本地运行
在安装完Hexo之后,继续在git命令窗口中依次执行命令
- cd <folder> #说明:将操作位置转移到将要存放项目的文件夹目录(便于区分,我的项目文件夹名为hexo1,位于F:\MySoftware\web-blog\hexo1。以下将使用这个文件夹)
- hexo init #说明:自动在文件夹(hexo1)中创建项目所需的文件
- npm install #说明:安装依赖包
- hexo generate #说明:构建,会在hexo1中创建public文件夹
执行完以上命令后,会多出以下文件和文件夹
- hexo server #说明:启动服务,关闭服务是ctrl+c
然后到浏览器中输入localhost:4000就可以看到下面这个界面了
注:以上命令在直接使用win+r打开的cmd中执行可能不会正常响应,建议在git命令框(Git Bash Here)中执行,且为了避免一些问题,应该在hexo1中鼠标右键打开Git Bash Here。若实在想用cmd,应该在用管理员身份打开的cmd中执行(找到system32目录下的cmd.exe,鼠标右键,用管理员身份打开) - 最后在命令窗口按下ctrl+c关闭服务(会请求确认,输入Y即可)
三、修改主题
上面我们在浏览器里看到的网页样式只是官方默认的主题,不用这个的话可以在Hexo官网中下载别人做好的主题:https://hexo.io/themes/
也可以直接搜索主题
鼠标放主题图片上可以选择预览,点击主题名(比如A-BOY)可以进入下载,我下载的是Smackdown
下载后的主题是zip压缩文件,解压到hexo1中的themes文件下
然后打开hexo1下的_config.yml文件,配置theme
将theme的值修改为刚解压好的主题文件的文件名(注:冒号后面有一个英语输入法下的空格)
修改完成后,保存。然后打开git bash命令框(强调在hexo1中打开),依次输入命令:
- hexo generate
- hexo server
然后刷新网页localhost:4000,就能看到界面已经改变了(图片是网上找的,这就是主题Smackdown最初的样子)
四、发表博客
在发表博客之前,先说说hexo1下的source和public两个文件夹
- source文件夹:下面有子文件夹_posts,在_posts下面存放的是markdown文件(原本是有一个)
- public文件夹:下面的所有内容将被推送到码云中的指定仓库中,这个之后说。主要是该文件夹中会保存所有我们在浏览器中看得到的html文件
所以我们编写的博客应该保存为markdown文件,然后将文件放到source/_posts下,由Hexo自动将该文件转换成对应的html文件并保存到public文件夹中
下面来实现发表博客
- 用markdown编辑器(我用的markdownpad2)编辑好一篇博客,然后保存为home.md格式
注意:
博客内部开头要加
title: Self-discipline #说明:文章标题
date: 2019-08-13 17:00:00 #说明:文章日期格式:2018-05-30 15:20:36
tags: welcome #说明:文章标签
categories: life #说明:文章分类
-------
冒号后面要有一个空格,categories后空一行,要有3个以上的 - (用来和文章内容区分)
- 将编辑好的.md文件放到source/_pests/中
- 打开git bash命令窗口(强调在hexo1中打开),依次执行命令:
>hexo clean
>hexo generate
>hexo server
最后刷新localhost:4000,就可以看到刚写得文章了
五、部署到码云
如果没有码云账号的话,先注册一个,码云官网:https://gitee.com/ 有了账号可以直接进入下面步骤
- 新建一个仓库,用于存放即将部署的文件
- 仓库创建好后,复制https地址(作为电脑本地和码云上仓库远程连接使用)
- 在git bash命令窗口执行命令:npm install hexo-deployer-git --save #说明:安装插件—推送本地文件到远程仓库
- 打开文件夹hexo1下的_config.yml。修改deploy的值(注:凡是修改_config.yml中的内容,都要记得在冒号后面必须有一个英文输入法下的空格),将刚复制的https粘贴到repository后面
- 在git bash命令窗口中执行命令:hexo deploy #说明:将本地文件部署到码云
- 随后会让输入码云账号和密码
- 完成后来到码云网站页面,刷新页面可以看到刚推送过来的所有提交
- 打开服务下面的Gitee Pages
- 直接启动服务
- 网站地址就是你的博客地址了,直接点击,就能看到和localhost:4000一样的界面了
六、本地推送新的博客文章到码云
要发表一篇博客,在第四步的基础上有点出入
- 编写markdown文件
- 将编写好的markdown文件放到source/_posts/中
- 在git bash命令窗口依次执行命令:
>hexo clean #说明:清理。等价于hexo c
>hexo generate #说明:构建,生成html文件。等价于hexo g
>hexo deploy #说明:推送到码云。等价于hexo d
- 在码云网站Pages页面点击更新
到这里,使用Hexo在码云上搭建个人博客就完成了
特别提示一下,关于配置文件_config.yml
- 在hexo1根目录下有一个(F:\MySoftware\web-blog\hexo1_config.yml)
- 在主题文件中也有一个(F:\MySoftware\web-blog\hexo1\themes\hexo-theme-smackdown-master_config.yml)
具体修改了有什么效果,打开看看就知道了