个人博客站点的搭建过程

个人博客站点的搭建过程

技术选型

• hexo+vercel
• hexo介绍
  • 官网：Hexo
  • Hexo 是一个快速、简洁且高效的博客框架。 Hexo 使用 Markdown （或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
• vercel介绍
  • 官网：https://vercel.com/
  • Vercel 是一个网站托管服务平台，开发者可以将自己的网络应用部署、托管在平台上运行，Vercel可以当检测到github仓库中的代码发生改变时，自动进行项目的重新部署。

搭建过程

hexo建站

本文默认读者了解npm的简单使用

• 安装hexo

  npm install -g hexo-cli
  

• 创建本地的博客站点

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

• 进入项目根目录，执行下方命令

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

• 在浏览器中访问图片中的项目地址

注意：上方图片是经过美化后的页面，刚建站的图片应为一个简单的页面

• hexo基本网站搭建完成（下附项目中各文件作用）

  

新建页面

hexo new "es的使用"

• 新建的页面出现的位置在source/_posts文件夹中

• **值得注意的是：**在md文件中的图片，需要采用第三方云存储服务进行配置，例如七牛云、阿里云等平台，目前使用gitee搭建自己的图床的图片url无法在项目中访问，如有解决的小伙伴，可以评论！
• 我在此处使用了阿里云的oss存储服务进行项目的存储，详细步骤，请参考下方链接Typora+PicGo+阿里云OSS搭建博客图床（超详细）_阿里云免费图床_慕雪华年的博客-CSDN博客

部署项目到vercel

（本部分默认读者电脑上拥有git工具与github账号）

• 在hexo项目的根目录中的**_config.yml**文件，在最下面，修改如下内容

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

• 将网站推送到github仓库中

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

• 注册vercle账号

• 
• 

• 选择使用Github账号注册

• 注册完成后，呈现下方页面

• 注册完成后，点击add new project

  

• 选择刚刚提交的项目，点击import

• 点击Deploy，等待构建完成即可

  

• 点击setting，查看vercle官方提供的域名

  

• 点击红框按钮，即可查看vercle提供的域名

• 也可以绑定自己的域名(本文重点不在如何申请域名，请自行百度)

  

个人博客网站的美化

• 在此附上，我自己使用的美化主题及文档（效果图如下）Butterfly - A Simple and Card UI Design theme for Hexo
• 也可以自行百度hexo的美化主题有哪些，美化部分自行配置即可
• 从技术选型到建站到美化共花费4个多小时，目前为止基本成型，后续将继续完善，加入搜索功能，与评论功能等