个人博客网站html源码_30分钟搭建一个自己的个人博客网站

  前言

目前市场上比较火的一些博客框架：Hexo、Solo、Halo 、jekyll 、gohugo、VuePress、wordpress等等 ，这些都是开源的静态博客框架(没有登录注册，后台管理等等)好处就是能够非常快速的搭建好自己的个人博客(也是要一定前端知识的)，也是因为我之前的blog网站实在没票子继续维护服务器了~~    我这里就使用 Hexo 框架搭建了，因为 Hexo 要求的环境我电脑都装有，网上关于Hexo的生态也比较丰富完善。可以看B站羊哥(CodeSheep)的视频就有介绍，我没有写详细的地方，百度一下资料也多得不得了   先看下我爆肝3天的结果吧(一天根据官方文档查资料搭建好，两天魔改页面和解决图床问题)：

---

一、前期准备

  项目最终是部署到码云上，不需要自己再购买服务器，这里也可以部署到 github， 但是我们大天国有一堵墙， 用 github 那速度着实让人着急！

1.安装NodeJS环境：因为 Hexo 是基于Node.js 的博客框架，就像 Java 要依赖 JDK 环境一样。

• node下载地址：http://nodejs.cn/download/ ，傻瓜式安装，这里不再详述

NodeJS环境安装重点拓展：

2.安装Git：用来将本地项目托管到码云，所以还需要自己注册一个码云的账号

下载地址：https://git-scm.com/download 学程序的，在工作中 Git 是必知必会的，还没学的建议去看看，所以这里不再详细介绍 Git

Hexo 官网：https://hexo.io/zh-cn/

---

二、Hexo安装

# 全局安装npm install hexo-cli -g# 查看hexo版本hexo -v

---

三、创建本地博客站点

# 初始化一个项目，hexoblog 是项目名hexo init  hexoblog

# 1、进入hexoblog项目目录cd hexoblog#/2、安装 hexoblog 项目的依赖包npm install#/3、启动 hexoblog 项目服务hexo server

此时，访问 http://localhost:4000/ 即可看到 hexo 默认的页面和一篇“Hello World”默认生成的文章

至此，Hexo 项目搭建成功！

项目主要文件目录介绍：

Hexo的其他配置详细信息，可查看官网介绍：https://hexo.io/zh-cn/docs/configuration

---

---

四、新建一篇blog文章

# 新建一篇名为 第一篇Hexo blog文章 的文章hexo new "第一篇Hexo blog文章"

  之后，就可以直接编辑刚刚新建的文章，再次启动服务查看效果，如下，这里有一个问题，Hexo框架文章中的图片只支持外链的形式，有很多方法解决，比如，可以在码云或者七牛云部署一个自己的图床。

---

五、将项目部署到码云

1、在码云(英文叫 gitee )新建一个仓库，注意标红的地方，这里我的码云用户名为 lingstudy

2、在项目根目录下安装 git 部署插件

# 之后就可以使用 hexo deploy(或简写 hexo d)将项目部署到gitee远程仓库npm install hexo-deployer-git --save

3、修改项目配置文件：_config.yml，在最下面，修改如下内容

# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy:  type: git  repo: 仓库URL地址  branch: master

4、使用命令 hexo d 将项目部署到 gitee 远程仓库，此时本地文件夹中出现有一个public文件夹。

5、开启 Gitee Pages 静态网页托管服务

之后使用生成的网址即可访问博客，每次重新上传代码到gitee时，都需要点击下图的更新按钮重启page服务

访问生成的网址 https://lingstudy.gitee.io/  ，部署成功！

---

六、修改主题

官网主题：https://hexo.io/themes/

可以去官网找自己喜欢的主题，下载下来，我这里就随便拿一个来演示了

1、进入所下载主题根目录下的 theme 目录，将里面的文件复制到自己项目的 theme  目录下

2、修改根目录下的配置文件 _config.yml

3、启动项目，访问：http://localhost:4000/ 先在本地查看主题是否修改成功

4、将修改后的项目部署到远程仓库

# 生成静态网站文件hexo g  # 上传到远程仓库hexo d# 1、清除 hexo 的缓存hexo clean# 2、采用一键部署hexo g --d

5、访问 https://lingstudy.gitee.io/ 主题样式修改并部署成功！

(这里若出现样式错乱，可能是浏览器缓存问题，执行 Ctrl + F5 强制刷新一下即可)

至此，Hexo + Gitee 部署自己的个人博客完成！

---

---

七、拓展：快速编写文章

新建文章时每次都要执行 hexo new "blogName" 命令很麻烦

可以直接到根目录 /source/_posts 目录下，创建一个.md 文件进行编写，在文件的顶部添加下面内容就可以了，主要写一个 title 就好了，其他都可以省略

---title: 文章名称date: 2020-07-30 16:46:07(创建时间)tags: 标签名categories: 分类description: 描述comments: 是否开启评论(true or false)---

之后，使用 hexo g --d 命令推送到 gitee上，并在 gitee 上更新一下 Gitee Pages 服务即可.

---

---

END

为什么一定要有一个自己的个人博客？我一直认为坚持写优质的blog文章，是提升和巩固自身能力的重要方法之一！ 我的现在这个效果，是花了大量时间去修改和配置了的，其实搭这种blog对提升技术不会有太大帮助，因为用的是已经写好的框架(模板)，可我就是用不爽默认的样式虽然不是走前端的。最后，搭建好了欢迎到留言区互留友链~