如何快速用hexo框架搭建个人博客

前言

最近刚搭建了以属于自己的个人博客,因为之前从未接触过,搭建过程中遇到了很多问题,大部分都解决了,也有正在解决中的,在这里把问题总结一下希望对大家有所帮助。 我用的是hexo框架加mater主题,也加入了一些个人元素,效果展示请访问我的博客

hexo 介绍

hexo是一款我认为比较方便的博客框架,已经比较成熟了,遇到了问题网上有很多解决办法,比较适合新手。详细介绍可以自行百度,我在这里就不过多介绍了。

hexo安装

hexo的安装比较简单,安装步骤:

  1. nodejs
    Node.js 官网下载LTS稳定版本,按步骤安装。

  2. Git 点击下载Git下载,双击下载后的exe文件进行安装

  3. 安装hexo,打开终端cmd窗口输入

    npm install -g hexo-cli
    

    或者用cnpm安装(淘宝的相对快一点),先利用npm安装cnpm

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    

    然后再安装hexo-cli

    cnpm install -g hexo-cli
    

开始搭建博客

  1. 新建一个myBlog文件夹来存放博客文件,在myBlog中打开cmd窗口,执行命令
    hexo init
    
    之后就会发现myBlog文件夹中生成了一些文件
    在这里插入图片描述
  • _config.yml => 网站的 配置 信息,您可以在此配置大部分的参数。
  • package.json => 应用程序的信息。
  • scaffolds => 模版文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。
  • source => 资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。
  • themes => 主题文件夹。Hexo 会根据主题来生成静态页面。
  1. 生成静态文件。在终端中输入

    hexo g
    
  2. 启动服务器。在终端中输入

    hexo s
    

    然后默认情况下,在浏览器中访问网址: http://localhost:4000/ 即可预览个人博客。按两次ctrl+c可以退出
    在这里插入图片描述

  3. 你可以执行下列命令来创建一篇新博客。

    hexo n "博客名称"
    

    之后你就可以到source/_post中找到新建的博客(.md文件)用编辑器编辑。使用markdown语法

  4. 还有另外两条指令

  • hexo clean
    hexo clean
    
    清除缓存文件 db.json 和已生成的静态文件 public。
    网站显示异常时可以执行这条命令试试。
  • hexo g
    hexo g
    
    生成网站静态文件到默认设置的 public 文件夹。
    hexo g 是 hexo generate 的缩写,命令效果一致
  • 一般使用组合
    hexo clean && hexo s
    hexo clean && hexo d
    

部署

可以选择部署到github或gitee码云上,都是免费的,流程也都差不多。但码云相对来说比较快,我一开始部署到了github上嫌太慢了就转到了码云上。这里我以码云gitee为例

  1. 安装 hexo-deployer-git。
    cnpm install hexo-deployer-git --save
    
  2. 进入码云官网登录点击历右上角加号新建仓库
    在这里插入图片描述
    **特别注意!**这里的名称和路径是一样的,并且都要和用户名相同,要不之后会出错(博客没有样式)。我因为这个折腾了大半天,最好一样,省得麻烦
    在这里插入图片描述
    然后点最下面的创建创建仓库
    在这里插入图片描述
    这样就创建成功了,点击复制仓库地址添加到下面代码中
  3. 修改配置。找到myBlog根目录下_config.yml文件,在最后配置
    deploy:
      type: git
      repo: //复制过来的地址
      branch: master
    
  4. 在cmd窗口输入下面代码把代码上传到远程仓库中(需要输入用户名和密码)
    hexo d
    

在这里插入图片描述
像上面这样就是上传成功了
10. 回到刚刚创建的仓库发现多了很多代码,点击服务下的Gitee Pages
在这里插入图片描述
点击下面的更新,稍等片刻会出现一个地址就是你的博客地址了,就可以通过地址访问你的博客了
在这里插入图片描述

  1. 大部分问题出在matery主题的个性化定制上,下一篇再写吧! 欢迎交流~
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值