【Hexo】手把手教你搭建属于你自己的博客

·  阅读 547
【Hexo】手把手教你搭建属于你自己的博客

这是我参与8月更文挑战的第2天,活动详情查看:8月更文挑战

关于Hexo的一切 —— 我的Hexo专栏

零 楔子

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

偶然间了解到了 Hexo 这个静态博客网站,通过github绑定,无需购买服务器 就可以生成完全属于自己的博客网站(白嫖)。

因为不熟悉前端,我在搭建过程中也经历了许多的坑,现在我将搭建流程分享出来,希望能给你们提供一些帮助。这是我的两个博客网站:gitee.ioheeh.xyz,大家可以点开看看搭建好后的效果

最重要的是它是免费的,里面也有很多插件和博客主题模板,你完全可以根据自己的喜好来设置它的风格。

心动不如行动,现在就开始搭建属于自己的博客吧。有什么问题可以在评论区讨论,觉得有用的兄弟萌可以点个赞😝

一 运行环境准备

本文环境信息:

  • win10 + vscode(可以是任意文本编辑器)
  • Node.js
  • Git
  • 修改npm为淘宝镜像源,并设置cnpm
  1. 环境的下载只需点开网站找到适合自己的版本安装即可,这里不赘述🍉。

  2. 安装完毕后可以通过cmd命令行输入node -v,npm -vgit --version来验证,如果出现下图则安装成功。

    image-20210817213319296

  3. 修改npm的镜像源为在国内更为稳定的淘宝镜像源(建议永久设置)

     # 临时改变镜像源
     npm --registry=https://registry.npm.taobao.org
     ​
     # 永久设置为淘宝镜像源
     npm config set registry https://registry.npm.taobao.org
     ​
     # cnpm安装,在国外服务器不佳时就可以用cnpm代替npm命令
     npm install -g cnpm --registry=https://registry.npm.taobao.org
    复制代码

二 Github准备

  1. 打开GitHub,登陆你的账号。

  2. 新建一个格式为你的用户名.github.io的仓库

    image-20210817214724399

  3. 创建成功后在桌面点击右键,Git Bash Here,打开Git的命令行输入这两行代码:

     git config --global user.name "此处填写你注册github时的用户名"
     git config --global user.email "此处填写你注册github时的邮箱"
    复制代码
  4. 然后就可以在C:/Users/[username]/下找到.gitconfig文件(如果没能找到,请打开显示windows显示隐藏文件的功能),用编辑器打开看到以下内容代表配置成功。

    image-20210817220130009

三 安装Hexo

  1. 首先新建一个文件夹👀作为你的博客文件的存放位置,点进去打开Git命令行分别输入:

      # hexo框架的安装
      npm install -g hexo-cli
      
      # 等上一个命令完成后,再输入下面的命令
      hexo init
        
      # 安装博客所需要的依赖文件
      npm install
    复制代码

    💥 Tips:Hexo一大好处就是你在安装过程内出现了任何问题,都大可以删掉文件夹重来。 注意后续所有操作都应该在这个文件夹目录下进行~

  2. 等待运行完成,你会发现此时文件夹内多了好多文件。此时本地搭建完成,我们来运行一下试试看,输入以下命令:

     hexo g
     hexo s
    复制代码

    image-20210817222109197

  3. 根据提示我们打开 http://localhost:4000 ,就可以看到生成的网页,说明Hexo已经成功在本地运行。

四 发布到Github

我们已经完成了Hexo下载安装和本地运行,接下来将本地博客发布到Github让别人也能通过网址访问你的博客。

  1. 在本地文件夹下打开Git命令行,分别输入以下命令

     # 安装用来发布的插件
     npm install hexo-deployer-git --save
     ​
     # 将本地目录与Github关联起来
     # 这步输入后一直回车即可
     ssh-keygen -t rsa -C "你的邮箱地址"
    复制代码
  2. C:/Users/[username] 目录下找到名为.ssh 的文件夹,打开其中的 id_rsa.pub,复制里面的的内容。 然后打开 Github,点击右上角的头像 Settings 选择 SSH and GPG keys

    image-20210817223107419

  3. 点击 New SSH key 将之前复制的内容粘帖到 Key 的框中,Title 可以随意,点击 Add SSH key 完成添加。

    image-20210817223308712

  4. 回到命令行界面测试是否与Github连接成功,输入ssh -T git@github.com,出现一个询问内容输入yes,出现You’ve successfully …说明连接成功。

  5. 进入博客站点目录,用文本编辑器打开_config.yml,这个_config.yml 是博客的配置文件,在以后会经常使用到,修改如下图的几个地方:

    image-20210817224330872

  6. 然后滑到文件最底部deploy处添加如下代码:

     type: git
     repo: git@github.com:github用户名/github用户名.github.io.git  
     branch: master
    复制代码

    image-20210817224507786

  7. 最后一步,生成页面并发布,我们执行如下命令:

     # generate, Hexo会根据配置文件渲染出一套静态页面
     hexo g
     ​
     # deploy, 将上一步渲染出的一系列文件上传至至Github Pages
     hexo d
     ​
     # 或者也可以直接输入此命令,直接完成渲染和上传
     hexo g -d
    复制代码

    上传完成后,在浏览器中打开网址 你的github用户名.github.io,查看上传的网页。如果页面变成了之前本地调试时的样子,说明上传完成了。没变的话查看一下上传时命令行窗口的信息有没有错误信息,没有的话等一下或按ctrl+f5刷新清除一下浏览器缓存试试。

五 写文章

  1. 在博客文件夹的/source/_posts目录下新建或修改md格式的文章,每个文章前都至少添加以下front-matter字段。

     ---
     title: hexo文章
     date: 2021-08-17 22:25:00
     ---
    复制代码
  2. 每次上传都应该在命令行输入:

     hexo cl
     hexo g -d
    复制代码

都看到这里了,点个赞呗😆

这两天内会更新插件以及主题的推荐~ 欢迎关注交流 ❤

更多有趣文章:Mancuoj 的个人主页

分类:
前端
标签: