上虞网站建设/营销服务机构
❝通过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默认主题虽然挺简约的,但功能不够全面,下篇将写到如何更换主题
