从零开始搭建个人博客到Github上

前言

  • 本次搭建的博客为基于Hexo框架的静态博客
  • 本次是在Windows上搭建个人博客,其他系统大同小异,使用的是git bash来运行一些简单的Linux命令
  • Github国内访问速度较慢(特殊工具除外),所以这并不是最佳的搭建方案,有条件的话建议还是自己购买服务器进行搭建

具体搭建步骤

1. 下载Git

  • 本次搭建博客,我们主要会用到git bash工具来执行Linux命令,使用cmd也行。前往Git官网下载Git工具,并在git bash中配置好git(设置全局用户名、全局邮箱等),如:

    git config --global user.name "John Doe"
    git config --global user.email johndoe@example.com
    
  • 没有Github账号记得先申请一个,后续所有命令都在git bash中执行

2. 下载node.js

  • 前往node.js官网下载LTS版本(长期支持版),直接安装即可,因为后续Hexo的安装要用到npm工具:

  • 下载完成之后直接安装,安装完成之后使用 node -vnpm -v 命令来检查是否安装成功:

3. 下载npm淘宝镜像

  • 由于自带的npm工具下载hexo很慢(***牛逼~),所以先使用npm来下载cnpm工具,然后用cnpm下载hexo就会快得多:

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    
  • 如果命令执行失败了就多试几次。安装完成后使用cnpm -v来测试是否安装成功:

4. 下载hexo框架

  • 使用cnpm工具下载hexo:

    cnpm install -g hexo-cli
    
  • 使用 hexo v 命令来测试hexo是否安装成功:

5. 启动hexo

  • 先创建指定文件夹,用于hexo博客站点,本次我创建的文件夹名为HexoBlogs,之后的git bash命令都在此文件夹内执行:

  • 进入此文件夹,启动hexo框架之前先进行初始化:

    hexo init
    
  • 初始化完成之后会创建一个默认的hello-world博客和默认的landscape主题。然后我们生成博客对应的页面

    hexo g # 或者hexo generate
    
  • 然后我们启动hexo服务(退出时命令行使用ctrl+c)

    hexo s # 或者hexo server
    
  • 前往http://localhost:4000页面查看本地博客页面是否生成成功:

6. 在Github上新建仓库

  • 新建仓库命名格式必须为<Owner>.github.io,即“用户名.github.io”的格式,如tomandersen-cc.github.io

  • 创建完成之后保留此页面:

7. 上传本地hexo博客框架

  • 安装配置工具:

    cnpm install --save hexo-deployer-git 
    
  • 修改hexo相关配置,在之前创建的文件夹中,修改配置文件_config.yml,在最后几行的deploy模块中设置对应的参数typerepobranch

  • 其中参数repo的值即为之前创建仓库页面所显示的仓库地址,即:

  • 修改完成后,保存退出

  • 然后重新生成博客页面并上传至Github,依次输入以下命令:

    hexo clean
    hexo g # 或者 hexo generate
    hexo d # 或者 hexo deploy
    
  • 通过之前设置的仓库名来访问上传的博客(之后仓库名不能更改):

  • 至此hexo博客就已经搭建完成,并且成功上传到Github了


发布博客

  • 使用hexo n <blogname>命令创建博客,如:hexo n "My first blog"

  • 会在hexo站点文件夹下的 source/_posts/路径下创建对应名的.md文档,使用Markdown语法编辑此文档,然后再次创建博客页面,上传到Github即可实现博客发布:

    hexo clean
    hexo g # 或者 hexo generate
    hexo d # 或者 hexo deploy
    

更换博客主题

1. 下载主题

  • 去Github检索相关主题,当然也可以去官方主题市场进行下载,这里选择Github上的 material-indigo 主题作为例。

  • 使用git bash执行git clone命令,将工程克隆到之前创建的博客文件夹下的themes/indigo路径下:

    git clone https://github.com/yscoder/hexo-theme-indigo.git themes/indigo
    
  • 若clone速度太慢可以尝试修改hosts文件或者其他方式,这里就不多赘述

2. 配置主题

  • 修改博客站点文件夹下的_config.yml文件,将其中的theme参数设置成新下载的主题名:

  • 然后依旧是重新生成博客页面hexo clean hexo g,开启hexo s开启服务,在本地查看是否配置成功:

  • 最后便可以使用hexo d命令上传至Github,实现博客发布

  • 具体博客主题相关配置参考对应主题的官方文档

End~

全部评论

相关推荐

面试摇了我吧:啊哈哈面试提前五个小时发,点击不能参加就是放弃
点赞 评论 收藏
分享
10-28 14:42
门头沟学院 Java
watermelon1124:因为嵌入式炸了
点赞 评论 收藏
分享
评论
点赞
收藏
分享
牛客网
牛客企业服务