使用Hexo搭建一个属于自己的博客



一、博客的创建
1、下载node.js和Git并安装(Hexo框架依赖于node.js)
2、查看node.js的版本:	node -v
3、查看npm的版本:	npm -v
4、切换成国内的打包工具(使用淘宝的):
npm config set registry https://registry.npm.taobao.org
npm install -g cnpm -registry=https://registry.npm.tabao.org
5、查看cnpm的版本: cnpm -v
6、安装博客的框架(Hexo):cnpm install -g hexo-cli
7、查看Hexo框架的版本: hexo -v
8、windows下查看当前目录位置: chdir
9、创建一个文件夹blog在你指定的盘,进入文件夹右键,点击 git bash here(安装好git后就会有此选择;pwd查看当前目录)
10、初始化Hexo框架: hexo init
11、启动Hexo服务: hexo s
12、访问: http://localhost:4000/
13、创建自己的博客: hexo n "我的第一个博客"
14、本地指定blog位置可查看博客,并可以本地编辑
15、清除没用的东西: hexo clean
16、重新发布博客: hexo g
17、重启Hexo服务: hexo s
18、再访问: http://localhost:4000/
19、可查看到我们自己创建的博客:"我的第一个博客"

二、如何通过外网来访问我的博客
1、在gitee上创建一个仓库
(我的是:https://gitee.com/LJH130168/ljh-of-blog.git)
2、安装git部署工具:cnpm install --save hexo-deployer-git
3、修改blog根目录下的config.yml文件:
	deploy:
	type:'git'
	repo:https://gitee.com/LJH130168/ljh-of-blog.git
	branch:master
4、部署(发布项目到码云):hexo d
5、部署报错运行:
	git config --global user.name "LuJiaHong" 
	git config --global user.email "2275435906@qq.com"
6、再执行部署:hexo d
7、使用gitee pages服务发布项目成一个网站
8、添加样式(修改blog根目录下的config.yml文件):
	url: http://ljh130168.gitee.io
	root: /ljh-of-blog/
9、再执行:hexo clean、hexo g、hexo s、hexo d 系列步骤
10、访问:https://gitee.com/LJH130168/ljh-of-blog/pages
	部署点更新即可
11、即可访问个人博客:http://ljh130168.gitee.io/ljh-of-blog/

三、修改个人博客主题(Hexo)

主题网站

https://hexo.io/themes/

参考博客

我们查看E:\blog\themes知道默认主题,因此自己下载一些主题放里面即可。

1、主题:
yilia主题:
	https://github.com/litten/hexo-theme-yilia
yilia-plus主题:
	https://github.com/JoeyBling/hexo-theme-yilia-plus
	
2、在blog子文件themes里面克隆:
yilia主题:
	git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
yilia-plus主题:
	git clone --depth=1 https://github.com/JoeyBling/hexo-theme-yilia-plus.git ./yilia-plus
	
3、配置
修改hexo根目录下的 _config.yml ➡️ theme: yilia-plus

4、显示侧边栏(在博客根目录(不是yilia-plus根目录)执行以下命令):
	cnpm i hexo-generator-json-content --save

5、复制下面到blog下面的_config.yml中
	jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true
	
6、再执行:hexo clean、hexo g、hexo s、hexo d 系列步骤
7、访问:https://gitee.com/LJH130168/ljh-of-blog/pages
	部署点更新即可
8、即可访问个人博客:http://ljh130168.gitee.io/ljh-of-blog/

四、如何外网上显示自己博客上传的图片
1.找到Hexo下的_config.yml里的post_asset_folder,把这个选项从false改成true。

2.在Hexo目录下打开Git Brsh,执行一个下载上传图片插件的命令:
cnpm install hexo-asset-image --save。

3.继续在Git Brsh下利用hexo n "博客名"来生成md的文件,这时就会在同级的目录下生成一个同名的文件夹。

4.在.md的文件中要插入图片时,先要把所要插入的图片放在生成的同名文件夹下。

5.利用markdown的语法将文件引入文章中。

6.最后再执行:hexo clean、hexo g、hexo s、hexo d 系列步骤
7.访问:https://gitee.com/LJH130168/ljh-of-blog/pages
	部署点更新即可
8.即可访问个人博客:http://ljh130168.gitee.io/ljh-of-blog/

另一种方法

#下载插件
npm install hexo-asset-img --save

image-20210621220018850


五、插入图片的方法
1、原生写法:
	![这是代替图片的文字,随便写](xxx\xxx.png)
	
2、html->img写法(控制图片缩放):
	<img src="xxx\xxx.png" 	style="zoom:50%;" />
	
3、html->div->img写法(插入多张图片,并控制大小):
	<div align="center"> 
	<img src="xxx\xxx.png" height="300" width="100%" />  
	<img src="xxx\xxx.png" height="300" width="100%" />     
	</div>

六、插入视频
<video src="链接" type="video/mp4" controls="controls" style="max-width: 100%; display: block; margin-left: auto; margin-right: auto;">
your browser does not support the video tag
</video>

七、github
  • 我的github地址

    https://github.com/LJH130168
  • 用户名和密码

    username:LJH130168
    password:LuJiaHong130168
  • cankao

    https://zhuanlan.zhihu.com/p/370635512
    https://zhuanlan.zhihu.com/p/60578464
    https://blog.csdn.net/sinat_37781304/article/details/82729029?depth_1-
  • 解决github pages无法访问

    https://blog.csdn.net/qq_41509200/article/details/111998090
  • 搭建主题

    https://www.cnblogs.com/mfrank/tag/Hexo/
  • hexo部署在GitHub密码避免输用户名和密码

    https://blog.csdn.net/weixin_30716141/article/details/99869367
  • 解决github上图片不显示



node.js下载

git下载

参考视频


文章作者: LJH
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 LJH !
  目录