博客,它的正式名称为网络日记,是使用特定的软件,在网络上出版、发表和张贴个人文章的人,或者是一种通常由个人管理、不定期张贴新的文章的网站。截至2013年,BSP商家风起云涌,已有数十家大型博客站点。新浪博客,网易博客,搜狐博客,腾讯博客,博客中国等。
实现博客的方式分为:1.博客站点注册用户后,在上面发表;2.购买域名和服务器,搭一个网站;3.利用托管平台托管博客 。
本文主要介绍利用Hexo+Github 进行博客搭建(以下均为Windows 系统)。
Hexo是一个快速、简洁且高效的博客框架(使用 Markdown(或其他渲染引擎)解析文章)(静态)。GitHub 是一个面向开源及私有软件项目的托管平台,只支持 Git 作为唯一的版本库格式进行托管。
本文主要参考文档: documentation|Hexo ;使用 Hexo+GitHub 搭建个人免费博客教程(小白向);【基础篇】hexo博客搭建教程;Github Pages+Hexo搭建博客。
搭建步骤
一、Hexo+Github 原理
二、安装软件
Hexo 基于 Node.js,搭建过程中还需要使用 npm(Node.js 已带) 和 Git,因此先搭建本地操作环境,安装 Node.js 和 Git。
1.安装 Node.js, (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本),下载地址: http://nodejs.cn/download/。
(1)选择windows安装包.msi安装。
(2)运行安装包,选择要安装的路径,默认选择c盘。
(3)请确保勾选 Add to PATH 选项,然后一直点Next继续就可以了。
2.安装Git,下载地址:https://git-scm.com/。
(1)点击下载最新版本。
(2)运行安装包,选择合适的安装位置,然后点Next。
(3)一直点Next继续就可以了。
3.验证 Node.js, npm(Node.js 已带) 和 Git是否已安装成功。
安装完成后,Win+R 输入 cmd 并打开,依次输入 node -v、npm -v 和 git --version 并回车,如下图出现程序版本号即可,如果没有版本号,请重新安装。
4.安装cnpm。
npm:国外服务器,受网络的影响比较大,Node.js的包管理器;cnpm:是一个完整 npmjs.org 镜像,可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
(1)安装完Git后,在桌面右键会有Git Bash Here,点开,输入执行下面的命令。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
(2)检查cnpm是否安装成功,输出版本号则安装成功了。
$ cnpm -v
5.安装Hexo。
所有必备的应用程序安装完成后,即可使用 npm (或cnpm)安装 Hexo。
$ npm install -g hexo-cli
三、建站
1.新建文件夹。
新建一个文件夹,如在F盘新建了一个blog文件夹,就在blog文件夹下打开git bash。
2.初始化Hexo,Hexo 将会在指定文件夹中新建所需要的文件。
(1)执行命令,初始化。
$ hexo init
到Install dependencies的时候你可能会卡住,只需要在这里的时候结束命令,按Ctrl + c就可以结束命令。
(2)执行命令,安装所需组件。
$ npm install
命令完成后,就完成了初始化。
(3)预览博客。
$ hexo s
复制http开头的网址,在浏览器打开,出现 Hexo 默认页面,本地博客安装成功。
四、部署
本地博客只能本地预览,如何将其上传到一个地方,然后通过域名访问呢?
两种部署方法:Github:国外网站,是英文;访问速度较慢;不需要实名认证;域名形式可以自定义。Coding:国内的平台,网站是中文;访问速度快;部署网站需要实名认证,需填写身份证号;域名是随机给的,所以很长而且不能自定义。如果你有自己的域名,Github和Coding都可以绑定域名。
以下采用Github部署。
1.注册Github账号,选择免费账户(Free)。地址: https://github.com/。
2.连接Github。
(1)右键 -> Git Bash Here,设置用户名和邮箱。
$ git config --global user.name "GitHub 用户名"
$ git config --global user.email "GitHub 邮箱"
(2)创建 SSH 密匙,一直回车。
$ ssh-keygen -t rsa -C "GitHub 邮箱"
(3)添加密钥。
进入 [C:\Users\用户名.ssh] 目录(要勾选显示“隐藏的项目”),用记事本打开公钥 id_rsa.pub 文件并复制里面的内容。登陆 GitHub ,进入 Settings 页面,选择左边栏的 SSH and GPG keys,点击 New SSH key。Title 随便取个名字,粘贴复制的 id_rsa.pub 内容到 Key 中,点击 Add SSH key 完成添加。
(4)验证连接,出现 “Are you sure……”,输入 yes 回车确认,显示 “Hi xxx! You've successfully……” 即连接成功。
$ ssh -T git@github.com
3.创建 Github Pages 仓库。
GitHub 主页右上角加号 -> New repository。创建后博客地址为:https://用户名.github.io。
4.部署 Hexo 到 GitHub Pages。
(1)安装上传插件。
$ npm install hexo-deployer-git --save
(2)修改配置。
打开项目,点击绿色按钮,点击Use SSH,复制git开头的地址。
打开站点配置文件 _config.yml(根目录下) ,修改deploy信息。
deploy: type: git repo: 复制的地址(或git@github.com:用户名/用户名.github.io.git) branch: master
修改URL和root(不修改git访问时,可能css、js找不到资源)。
(3)上传。
在博客根目录下打开git bash,执行命令上传。
$ hexo clean
$ hexo g -d
在Github上打开项目,点击Settings,往下滑找到Github pages, Source选择master branch,点击Save,得到网站地址,访问就可以看到 Hexo 网站了。
5.绑定域名(可选)。
上述博客搭建完成使用的是 GitHub 的子域名(用户名.http://github.io),可以为 Hexo 博客绑定自己的域名替换 GitHub 域名,更加个性化和专业,也利于 SEO。此步骤详细参看使用 Hexo+GitHub 搭建个人免费博客教程(小白向)。
五、基本操作
1.新建文章,发布。
进入博客所在目录,右键打开 Git Bash Here,创建博文,文章名建议是英文,会显示文章生成的目录,每次生成的文章都固定在博客根目录下面的source/_posts下(可以不使用命令创建 .md 文件,只需在文件开头手动加入格式 Front-matter 即可)。
$ hexo new "my-first-blog“
可以看到文章是一个后缀为.md的文件(markdown文件),建议安装Typora编辑.md文件,Typora下载地址:https://www.typora.io/。
使用Typora插入图片时需注意Typora的文件偏好设置及图片根目录设置详看:typora + hexo博客中插入图片。
编辑完后,运行下面代码将文章渲染并部署到 GitHub Pages 上完成发布。
$ hexo clean
$ hexo g # 生成页面
$ hexo d # 部署发布
2.删除已发布的文章。
(1)删除文件夹source/_posts下目标文章markdown文件。
(2)删除.deploy_git文件夹。(原因:执行hexo g后,生成一个public文件夹(完整的静态博客),执行hexo d,把public文件夹拷贝到.deploy_git文件夹,推送push到远程库,会触发Pages服务去build项目,部署到网站上。)
(3)执行以下命令。
$ hexo clean
$ hexo g
$ hexo g
3.网站设置。
包括网站名称、描述、作者、链接样式等,全部在网站目录下的 _config.yml 文件中,参考官方文档按需要编辑,注意冒号后要加一个空格。
4.更换主题。
(1)在Themes | Hexo 选择一个喜欢的主题,打开主题的项目地址后,点击Clone or download,然后复制https开头的地址,比如 NexT,再网站目录打开 Git Bash Here 下载主题(git clone 代表克隆,后面接下载地址,最后面的themes/next是把文件夹下载到主题目录下,并把主题文件命名为next。)。也可以点击Download ZIP下载主题文件压缩包,解压压缩包,把文件夹放在博客目录下的themes目录,并把文件夹命名为主题的名字。
$ git clone https://github.com/theme-next/hexo-theme-next.git themes/next
(2)然后修改配置 _config.yml 中的 theme 为新主题名称 next,在博客目录打开git bash,输入指令,出现浏览地址,在浏览器打开预览。(有的主题需要将 _config.yml 替换为主题自带的,参考主题说明。)
$ hexo s
5.常用命令。
$ hexo new "name" # 新建文章
$ hexo new page "name" # 新建页面
$ hexo g # 生成页面
$ hexo d # 部署
$ hexo g -d # 生成页面并部署
$ hexo s # 本地预览
$ hexo clean # 清除缓存和已生成的静态文件
$ hexo help # 帮助
结语
这是叶大灵写的第一个博客!(由于一些原因图片资源丢失了见谅)
Hexo 是一种纯静态的博客,必须在本地完成文章的编辑再部署到 GitHub 上,依赖于本地环境。 WordPress 或 Typecho 是动态博客,能直接在浏览器中完成撰文和发布。
觉得有帮助的朋友,不妨点个赞再走呗 ╰( ̄▽ ̄)╭ ~