美文网首页
使用hexo搭建个人博客

使用hexo搭建个人博客

作者: suxin1932 | 来源:发表于2020-07-05 16:55 被阅读0次

    title: 使用hexo搭建个人博客
    toc: true


    1.软件安装

    1.1 下载并安装 node.js

    1.1.1 下载地址

    https://nodejs.org/en/
    

    1.1.2 安装后验证

    node -v
    

    1.2 安装 cnpm

    1.2.1 安装命令

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

    1.2.2 安装后验证 cnpm

    cnpm -v
    

    1.3 安装 hexo

    1.3.1 安装命令

    cnpm install -g hexo-cli
    

    1.3.2 安装后验证 hexo

    hexo -v
    

    2.使用 hexo 搭建 blog

    2.1 创建一个空白 dir, 并进入到该 dir, 比如

    zx-hexo
    

    2.2 在 zx-hexo 目录下, 初始化 blog

    hexo init
    

    2.3 本地启动 blog, 主要是本地预览文章用 (按下 ctrl+c 即可停止)

    hexo s
    

    使用下述网址即可访问本地部署的 hexo 博客
    http://localhost:4000

    2.4 在 zx-hexo 目录下, 安装上传图片到 github 的插件

    cnpm install https://github.com/CodeFalling/hexo-asset-image --save
    

    同时修改 zx-hexo 目录下, _config.yml文件配置

    post_asset_folder:true
    

    2.5 在 zx-hexo 目录下执行命令 'hexo n'新建一篇 blog, 进入该blog目录, 并用 md 工具比如(typora) 编辑该文章

    E:\Programming\zx-hexo>hexo n "使用hexo搭建个人博客"
    INFO  Created: E:\Programming\zx-hexo\source_posts\使用hexo搭建个人博客.md
    
    >> 可以发现该source目录下被新建了一个 文件及文件夹
    使用hexo搭建个人博客.md
    使用hexo搭建个人博客
    >> 在该文件中存放图片, 并在 md文件中引用即可
    
    <img src="使用hexo搭建个人博客/xunlei.png" style="zoom:50%;" />
    

    2.6 然后重新回到 zx-hexo 目录, 清理一下目录

    hexo clean
    

    2.7 重新生成

    hexo g
    

    2.8 再次重启, 预览即可看到

    hexo s 
    

    3.将 blog 部署到 github 个人主页上

    3.1 在 zx-hexo 目录下安装 hexo-deployer-git

    cnpm install --save hexo-deployer-git
    

    3.2 编辑 zx-hexo 目录下的 _config.yml 文件, 在文件末尾添加如下内容

    deploy:
      type: git
      repo: https://github.com/abc/abc.github.io.git
      branch: master
    
    其中 repo 中的内容即为 github 个人主页链接地址, 关于如何创建 github 个人主页, 可自行百度即可
    

    3.3 在 zx-hexo 目录下, 将本地 blog 推送到 git 仓, 可能需要输入 username & pwd

    hexo d
    

    3.4 推送成功后, 在浏览器中输入对应域名, 即可访问

    https://abc.github.io
    

    4.更换主题

    4.1 假设要更换的主题是 maupassant

    https://www.haomwei.com/technology/maupassant-hexo.html
    

    4.2 在 zx-hexo 目录下, 依次执行命令:

    git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
    cnpm install hexo-renderer-pug --save
    cnpm install hexo-renderer-sass --save
    

    4.3 编辑 zx-hexo 目录下的 _config.yml 文件, 将theme的值改为maupassant

    theme: maupassant
    

    4.4 依次执行命令

    hexo clean
    hexo g 
    hexo d 
    

    4.5 再次在浏览器中输入对应域名, 即可发现主题已更换(可能会有几分钟延迟)

    https://abc.github.io
    

    相关文章

      网友评论

          本文标题:使用hexo搭建个人博客

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