typora绑定github博客_博客搭建之Hexo(第二期)

❝

通过Hexo搭建一个个人网站为了保证教程的详细性，将分成多期连载发布

❞

对于新手小白来说一般不可能一次就配置成功,所以要做好失败重来的心理准备,如果你看不懂教程但想坚持下去,可以点击下方留言或者加我wechat

点我留言

非诚勿扰

本地安装Hexo博客

在磁盘中找一个合适的位置,用来存放Hexo程序,以及后续的文章,插件等,路径不要有中文例如我在F盘下新建hexo-blog文件夹,打开文件夹,在空白处右击选择Git Bash Here,进入git窗口

(由于我已经安装过很多次,所以示例图片会与实际情况有差异,但配置步骤都是一致的,不必在意)

?安装Hexo博客程序 输入以下命令npm install -g hexo-cli并敲击回车,

!第一次等待时间比较久属于正常现象 出现下图红框中的代码即成功

?初始化和安装所需的组件 输入以下命令hexo init并敲击回车

耐心等待安装 出现start blogging with Hexo!即安装成功

?继续输入npm install

?输入hexo g(这里是生成页面的意思)

?输入hexo s(这里是启动预览的意思) 如图所示,这里已经可以在本地浏览器访问http://localhost:4000来查看预览了,(!!!需要注意按下ctrl+c会停止预览)

下面就是Hexo的默认主题了,本地博客安装到此结束

部署到Github

我们需要将本地程序部署到Github上

打开安装Hexo博客的文件夹,可以发现里面多了很多配置,这里先介绍几个经常使用的

public        存放网站文件
themes        存放主题文件
source        存放用户文件
_config.yml   站点配置

部署到Github后,可以使用其域名进行访问

?安装hexo-deployer-git 输入

npm install hexo-deployer-git --save

耐心等待

在博客文件夹中打开站点配置_config.yml(可选择记事本打开,或者vs,notepad++等) 在代码的末尾加上下面代码

deploy:
type: git
repository: https://github.com/你的用户名/你的用户名.github.io.git
branch: master

其中repository中的链接为你仓库中的链接,当然你也可以使用ssh来部署

完成后再git中输入

hexo d(这里是部署的意思)

会开始跑代码进行部署,如果失败了可能是上边步骤出错,在试一试,

或者输入hexo clean(意思是清理缓存,刷新),在进行部署(hexo d)

这时候我们就可以通过Github的域名来访问我们的网站了https://用户名.github.io

写文章

打开根目录下站点配置_config.yml,找到post_asset_folder: false修改为post_asset_folder: true并保存(这里是为了生成博文的同时,在同级目录下生成一个同名文件夹,来储存博文所需的图片,方便修改和管理)

在根目录下

输入命令

hexo new post "文章名"

如图,可以看见已经生成了一个存放照片的同名文件夹和.md文档,这是Markdown的文件格式,这时候就需要用到Markdown编辑器--Typora,后台回复关键字获取

双击打开.md文档进行博文书写 在设置中找到图像并勾选优先使用相对路径,当然你也可以使用图床,将图片放置在同名文件夹里面,方便管理这里我放在article-title同名文件夹下做演示打开博文后title代表标题,date代表时间,tag是标签的意思 后续还会加入分类,置顶,访问密码等

!!!  Typora支持Markdown语法以及HTML语法,所以想要写出优雅的博文,还是要懂一些这方面的知识

发布文章

记住下面的步骤,会经常用到

hexo new post "文章名"     #生成一篇文章
hexo g                   # 生成页面
hexo s                   # 本地预览(这步是为了检验一下文章是否有不妥的地方,非必需)
hexo d                   # 部署

!!!这四步就是写博文并发表的基本步骤hexo s为本地预览,非必需hexo g和hexo d是发布博文必需

左右滑动看图↓↓↓

hexo new page "name"  # 新建页面
hexo g -d             # 生成页面并部署(组合键)
hexo clean            # 清除缓存和已生成的静态文件
hexo help             # 帮助

hexo clean为清理缓存,不必每次都用

部署成功后不一定会立刻渲染出来,需要等待一会属于正常现象

第一次使用为了防止出错一般可以先进行hexo s预览一下

在进行hexo d部署上去

??可以看到已经部署上去了,已经可以通过域名进行访问了

Hexo默认主题虽然挺简约的,但功能不够全面,下篇将写到如何更换主题