zoukankan      html  css  js  c++  java
  • 搭建个人博客-hexo+github

    自己也算是摸爬滚打搭建成功,然后自己再重新安装部署一遍,把完整步骤分享给大家,同时最后有一些连接,如果我的步骤不行,大家可以参考其他人的(这个有点花费时间,大家提前有个心理准备 - _-)

    一、第一步:下载安装Git


     

    1、Git下载地址

    2、安装步骤


    个人选择全选

    选择第二个

                    然后一路默认

    二、第二步:下载安装node.js

    1、node.js下载地址


    两个版本

        2、安装步骤:一路默认就行(安装路径根据自己需要更改)

    三、第三步:安装hexo

    1、利用 npm 命令即可安装。在任意位置点击鼠标右键,选择Git Bash

     


    在电脑任意位置右键

    2、输入命令:npm install -g hexo


    注意:-g是指全局安装hexo。

    这里如果地址被“墙”,可以参考这篇文章的“安装Hexo”部分

    四、第四步:初始化Hexo

    1、创建文件夹(我的是在E盘创建的Hexo)


    根据个人爱好创建博客文件夹

    2、在Hexo文件下,右键运行Git Bash,输入命令:hexo init


    (这里可能时间会长些,要耐心等待)

    初始化成功后生成的一些列文件

    3、在_config.yml,进行基础配置


    基础配置

    其中可以在这里浏览更多主题,然后在Hexo文件夹下 Git Bash

    输入命令:git clone https://github.com/iissnan/hexo-theme-nextthemes/next(next为主题名字),来获得更多主题


    获取主题next

    下载成功(如果需要更改主题,请在_cofig.yml修改theme)

    4、本地浏览博客

      分别输入 如下命令:

          hexo g

          hexo s

        这里有更多hexo常用命令


     

      在浏览器输入:localhost:4000 ,就可以进行访问,效果如下:


    效果图

    5、写文章

    在E:Hexosource\_posts文件下,新建.md文件就可以写文章


    新建.md文件

    ---

    title: 我的博客

    ---


    简单测试下

    浏览效果

    五、部署到Github上

    1、申请Github账号,(注意别忘了进行账号邮箱验证)

    2.new repository


     

     

    然后点击


     

    3、在_config.yml进行配置


    (注意:要保存)

    4、安装hexo-deployer-git自动部署发布工具

        npm instal lhexo-deployer-git  --save


    (在Hexo文件夹下 Git Bash)

    5、发布到Github

        输入如下命令:hexo clean && hexo g && hexo d


     

    第一次发布需要验证github账号

    发布完成

    在仓库中我们也可以看到

    6、测试访问

    在浏览器输入:https://yanqiangmiffy.github.io/


    大功告成

    六、最后加上一些文章的传送门

    1、史上最详细“截图”搭建Hexo博客并部署到Github

    2、使用hexo+github搭建免费个人博客详细教程

    3、如何搭建一个独立博客——简明Github Pages与Hexo教程

    4、5分钟 搭建免费个人博客



    作者:致Great
    链接:http://www.jianshu.com/p/189fd945f38f
    來源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 相关阅读:
    前端开发中一些好用的软件包。
    LeetCode 26 删除排序数组中的重复项
    算法 主定理
    算法学习计划继续三四个月
    Web Api
    DOM viewport
    CSS OM
    DOM Range Api
    DOM 操作 2
    DOM Event
  • 原文地址:https://www.cnblogs.com/pangguoming/p/7498227.html
Copyright © 2011-2022 走看看