美文网首页技术干货饥人谷技术博客程序员的日常
使用 Hexo 和 GitHub Pages 搭建简单的个人博客

使用 Hexo 和 GitHub Pages 搭建简单的个人博客

作者: 你看到我的小熊了吗 | 来源:发表于2019-06-01 11:00 被阅读149次

    闲来无事,趁着摸鱼时间,使用HexoGitHub搭建出最简单的个人博客。
    毕竟磨蹭了很久了,苦于自己的技术水平不够,加上日常懒癌发作,终终终于找到了最简单又免费的方式来搭建个人博客,顺带撸出自己的第一个博文。
    下面就让我们愉(tong)快(ku)的开始吧!

    准备工作

    环境

    先安装好以下应用程序:

    安装过程不再赘述,可自行度娘,安装完毕后,使用npm即可完成Hexo的安装。

    $ npm install -g hexo-cli
    

    GitHub

    注册并登陆好 GitHub 账户

    Hexo

    创建你的项目

    在控制台执行以下命令

    $ hexo init <folder>
    

    如果你的电脑安装了yarn,执行该脚本后,会自动为你安装依赖(即执行yarn install),否则你还需执行以下命令

    $ cd <folder>
    $ npm install
    

    至此,你的本地博客已经建立成功,只需要运行

    $ hexo server
    

    并在浏览器上输入地址 localhost:4000 便可预览初始化的博客内容。

    GitHub

    创建自己的仓库

    进入你的 GitHub 主页,创建一个新的repository
    并输入对应的Repository name,请注意:必须保持格式<username>.github.io,其中<username>替换成你的 GitHub 账户名,例如:lostimever.github.io

    create.jpg

    点击Create repository即可。

    将本地博客上传至GitHub

    修改本地文件

    打开之前新建的hexo文件夹,在根目录下有个_config.yml文件,用文本编辑器打开,在最下面找到deploy,修改为:

    deploy:
      type: git
      repository: http://github.com/<username>/<username>.github.io.git
      branch: master
    

    <username>替换成你的 GitHub 账户名,并保存即可。

    开始部署

    在命令行中输入:

    $ hexo g
    $ hexo d
    

    当命令行中显示:
    INFO Deploy done: git
    说明部署成功。打开浏览器在地址栏中输入lostimever.github.io(将lostimever改成自己的),就能看见自己的博客了,别人也可以访问。

    可能出现的问题

    报错:ERROR Deployer not found: git

    在命令行中输入
    npm install hexo-deployer-git --save

    yarn add hexo-deployer-git
    重新执行

    $ hexo g
    $ hexo d
    

    *注意: 笔者安装的hexo的版本为

     hexo: 3.8.0
     hexo-cli: 2.0.0
    

    不同的版本之间的配置可能有些许不同,注意查看自己的版本。

    写博客文章

    创建新的文章

    在命令行中输入:hexo new “name”(将name替换成你的文章的标题),
    然后在source/_posts/里就能看到名为name.md的文件了,现在就可以愉快的写博(tu)客(cao)啦。
    也可以直接在source/_posts/里直接新建一个名为name.md的文件,注意开头需加入以下内容:

    ---
      title: name
      date: 2019-05-31 21:57:27
      tags:
    ---
    

    文章中如何插入图片

    Hexo插入图片的方式很多,这里只介绍一种:将图片放在当前文章的目录中。文章的目录可以通过配置_config.yml来生成。

    post_asset_folder: true
    

    _config.yml文件中的配置项post_asset_folder设为true后,执行命令$ hexo new "name",在source/_posts中会生成文章name.md和同名文件夹name。将图片资源放在name中,文章就可以引用图片资源了。

    {% asset_img image.jpg document name %}
    

    发表文章

    写好文章并保存后,重复 开始部署 中的操作即可。

    结束

    建博一时爽,更新如难产。

    参考

    相关文章

      网友评论

        本文标题:使用 Hexo 和 GitHub Pages 搭建简单的个人博客

        本文链接:https://www.haomeiwen.com/subject/qepotctx.html