记录自己的博客部署过程。
使用hexo+git部署博客。
参考视频:手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo
视频作者: CodeSheep
git与node.js的安装配置
git的安装
git若从官方下载的话下载速度过慢且下载时间过长可能会出现下载失败等问题,因此推荐从镜像网站下载git。如淘宝npm的镜像。
选择最新版本下载即可,本文章书写日期时最新版本为2.22.0版本
因版本可能不同,因此安装过程中的组件选择可能会有所差异,基本默认选项即可
下载完成后进入安装界面 (注:以下安装的选项请以实际自身需求为准,仅供参考):
选择需要安装的组件。
选择git的默认编辑器:
配置环境变量选项,推荐默认第二项:
选择https传输协议 默认即可:
选择git的换行方式 请根据自身需求更改:
设置git命令行的样式:
设置选项:1.是否允许文件缓存 2.是否允许git许可证管理,默认勾选:
是否参与新的测试,貌似是会使git更快,但还不稳定:
install 安装即可:
git安装完成后,需要进行配置,在git安装目录或菜单栏中找到git-bash,打开后如图
输入如下,其中" "中的your name 和your email为你的Git Hub用户名(非昵称)与邮箱
git config --global user.name "your name"
git config --global user.email "your email"
并可通过以下命令查询用户名与邮箱
git config user.name
git config user.email
结果如下
node.js 的安装
该文章书写时,版本为10.16.0
安装界面:
选择安装模式,我选择了第四个,next即可:
以下过程命令行既可使用windows的cmd,也可以使用git安装过程中的 git-bash进行操作
命令行中输入node -v
可查看node的版本 ,输入 npm -v
查看npm包的版本
node -v
npm -v
使用淘宝镜像下载 cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
下载完后查看cnpm版本
cnpm -v
使用cnpm下载hexo,用hexo -v查看hexo的版本:
cnpm install -g hexo-cli
hexo -v
hexo常用命令
hexo new "title"
新建文章(md文件),title为文章的标题hexo new page "pagename"
新建网页,pagename为网页的名称hexo clean
清除部署的緩存hexo n == hexo new
新建一篇文章hexo g == hexo generate
生成静态页面hexo s == hexo server
本地部署,可预览网站,默认端口为4000,浏览器输入localhost:4000
即可进入网站进行预览,回到git-bash按ctrl+c
退出预览(退出后localhost:4000
失效)hexo d == hexo deploy
将网站部署到GitHubhexo g -d
生成页面并部署到GitHubhexo g -s
生成页面并本地部署进行预览
在本地部署博客
在我的电脑中创建文件夹用于存储博客网站,文件夹名称自定义,我使用blog,目录为D:\blog。打开blog文件夹,右键空白处打开git-bash。
输入hexo init
进行初始化,等待时间较长,约几分钟
hexo init
注:若blog文件夹非空,则会报错:
使用hexo s
在本地启动博客
hexo s
如图所示显示本地部署成功
打开网页,地址栏输入http://localhost:4000即可从本地进入博客
到此为止仅仅是在本地部署博客,接下来需要通过github来将博客部署到服务器。
通过Git Hub将博客部署到远端服务器
通过Ctrl+C
停止服务
登陆自己的Git Hub 点击进入登陆界面
登陆成功后,网页右上角个人头像旁边,点击 + 号 选择New repository创建一个新的仓库
界面如图,其中Repository name中必须输入 [用户名].github.io
最后点击create repository创建仓库
创建成功后,界面如图,此时还没有任何代码。复制https的链接。
回到git-bash 使用cnpm安装git部署插件,插件名为:hexo-deployer-git
cnpm install --save hexo-deployer-git
安装过程中的警告可以忽略
修改 _config.yml 文件
vim _config.yml
移动到最低端,在deploy:后面修改文件,按 i 键进入插入模式,内容如下
type: git
repo: 刚刚复制的https链接
branch: master
修改前:
修改后:
==注意==: windows系统下,冒号: 后面要有一个空格,缺少空格的话type、repo、branch不会高亮,语句不会生效
插入完成后,按ESC,然后输入 :wq
保存并退出(linux语句)
修改完配置文件后 输入hexo d
即可将博客部署到远端服务器
hexo d
最后结果如图:
该过程可能需要输入用户名和密码,若Git Hub配置过SSH则不需要输入。如果有报错,检查之前的
git config --global user.name "your name"
git config --global user.email "your email"
配置语句是否正确 your name为用户名(非昵称)
部署成功后刷新Git Hub刚刚创建的仓库页面,就能加载出博客的代码了
并且可通过 用户名.github.io
来访问自己的博客,效果如图:
至此,博客的部署已经完成。
拓展
打开blog文件夹,可看到有以下目录
进入目录source/_posts
里面的md文件 (markdown文件)为博客上的文章,可将md文件存放至该目录来更新博客
hexo new
生成的文章也存放在这里themes目录里为博客的主题
可从Git Hub下载主题并通过修改 _config.yml 来应用主题
例如使用Git Hub上的yilia主题
在git bash中输入以下代码进行克隆
git clone http://github.com/litten/hexo-theme-yilia.git themes/yilia
clone 为克隆操作
http链接为目标代码仓库(repository) 后面加上 .git
themes/yilia 为保存目录,将目标保存到themes/yilia中
等待完成后,修改 _config.yml文件
vim _config.yml
修改目标如下
将theme改为刚刚保存的目录 yilia ,然后更新博客。
更新博客
在localhost:4000
页面,大部分修改配置后可以直接刷新页面进行预览,如更改配置、更新文章等等。但有的操作需要清除缓存重新部署页面才可以生效,比如更新插件等等。
故有时直接刷新未加载出来的更新,可尝试重新部署来查看是否更新成功。
hexo clean #清除缓存文件
hexo g -s #在本地生成页面直接部署,可通过localhost:4000查看
若在本地预览发现网站符合自己的预期,即可将网站部署到github
hexo d