静态个人博客 -- 框架Hexo + 链接GitHub

前言

  • 时间:2020.04.05
  • 内容:
    • 如何使用Hexo框架
    • 搭建个人博客
    • 并部署在GitHub
  • 备注:
    • 这里使用的是win10,如果是mac的话,有些传输操作会不一样,如果有linux基础的可以忽略这一条。
    • 实在不太会的,可以在管理员运行的cmd中,进入专属博客文件夹,将引用的这些代码逐个打一遍。
    • 这相当于使用一个框架,往里填充好自己的博客文章内容,此时能够通过localhost:4000去访问,但仅本机可以,别人的机子就访问不了。接着再将本地的相关代码通通传至GitHub自定义的仓库,这样就能够通过指定的网址去访问这个网站了。因此——这样的网站搭建起来是静态的。
    • 另外,这个不同平台的md上传之后,图片问题都会搞的比较头疼,本人也是初学,如有不对的地方欢迎指出。

一、安装Node.js + npm + cnpm插件

  • 地址:https://nodejs.org/en/download/

  • 检查命令行如下:

    node -v

    npm -v

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

    • registry表示镜像源,因为国外的东西会加载慢一点,使用这一条命令加载后速度会快一些。

在这里插入图片描述

二、 安装hexo框架

  • 安装代码如下:

    cnpm install -g hexo-cli

    hexo -v

  • 这里是加载hexo框架,直接在cmd里运行就可以了。

  • -v是检查安装是否成功。

三、建立博客专属文件夹

  • 博客专属文件夹初始化代码如下:

    hexo init

    sudo hexo init

  • 第一个是win版本,必须是以管理员身份进入的cmd。

  • 第二个的mac版本,表明意义同上。

  • 必须是一个空的文件夹,否则会一堆错误。

  • 注意专属文件的路径不要出现类似【】的符号,会报不符合32位的错。

  • 正确初始化后如下:
    在这里插入图片描述

  • 初始化后生成的文件如下:
    在这里插入图片描述

四、本地运行博客网站

  • 本地运行博客网站代码如下:

    hexo s

  • 正常运行后如下(已含退出):
    在这里插入图片描述

  • 此时可通过任意浏览器,输入网址后,本地浏览刚建好的博客框架:

    http://localhost:4000

  • 退出操作如下(前图):

    ctrl+c

  • 初始界面如下:

在这里插入图片描述

五、新建博客文章

  • 新建博客代码如下:

    hexo n “博客文章标题”

  • 效果图如下:

在这里插入图片描述

  • 接着可自行打开对应地址的md文件开始写文。

  • 如果是mac可以直接在终端建文及修改:

    vim 博客文章标题.md //进入

    wq //退出

  • 将博文清理下生成:

    hexo clean

    hexo g

  • 效果图如下:
    在这里插入图片描述

  • 此时重新回到步骤四,刷新运行即可。

六、建立GitHub专属仓库

  • 主要是用来代存前文“填充有自写博文的框架文件(初始状态的也行)”。

  • 注意Repository name必须要以xx.github.io形式命名

  • Step1操作如下:

在这里插入图片描述

  • Step2接着终端打入代码:

npm install hexo-deployer-git --save

  • 操作效果如下:

在这里插入图片描述

  • Step3配置_config.yml文件

    • win可以直接在文件里以记事本方式打开

    • mac可以使用vim _config.yml

    • 拉到文件最底部原始如下:
      在这里插入图片描述

    • 更改后如下:
      在这里插入图片描述

      • type改成git
      • repo表示仓库,把前面建立好的专属仓库地址cv过来
      • branch默认为master,但还是设置一下比较好
  • Step4部署到云端

    • 输入如下代码,会自动部署:

      hexo d

    • 分别弹出Username和Password,自行输入,效果如下:

在这里插入图片描述

  • 此时即可在任意浏览器中输入下方网址进入仓库中的网站:

    https://yourname.github.io

七、更换博客主题

  • 博客默认的主题在前文已展示,如果想要一些不一样的主题,可以网上搜 索好,克隆到本地博客专属文件夹中的theme文件里,并对html里的theme主题进行修改。
  • 这里给个yilia的例子:

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

  • Step1操作效果如下:

在这里插入图片描述

  • 接着需要到_config.yml文件中找到theme,改为新下载的主题yilia。

  • Step2操作效果如下:
    在这里插入图片描述

  • Step3重新generate生成一下:hexo g

  • Step4重新start一下:hexo s

    此时本地4000端口即可查看新主题下的个人博客。

  • Step5推上GitHub:hexo d

    此时可通过github指定网址进入新主题的个人博客。

    (与本地一致)不需要add push等操作,地址如下:

    yourname.github.io

发布了19 篇原创文章 · 获赞 0 · 访问量 1987

猜你喜欢

转载自blog.csdn.net/hyidol/article/details/105335040