美文网首页
HEXO搭建个人博客章

HEXO搭建个人博客章

作者: cl9000 | 来源:发表于2017-02-13 15:52 被阅读0次

    最近在无意中在网上看见个很不错的网页博客,少见,在网上一查是GitHub Page + HEXO搭建的个人博客。作为一个攻城狮,见到如此,必须自己也搞出来试试。查找一些网上的资料和填坑,不就一个个人的技术博客必须诞生啦。大家或许搭建的时候仅花个几分钟,但在主题优化上可能就会占用你一天甚至两天的时间,优化好后就快了。只管码MD了。我的博客效果https://cl9000.github.io

    why do myself Blog?

    1. 写技术博对自己技术经验的总结。
    2. 可以提升自己的表述能力,光会做 ?不会说怎么可以,那你只有被别人利用的价值了。
    3. 对自己以后的升值夹心肯定的,例如面试的时候可以抛出来你的链接,瞅瞅这,哈哈。
    4. 。。。无量好处。。。

    个人博客 - Mark - 搭建开始


    wo选择的是GitHubPage + Hexo,一种简单高效的构建方式。
    当然还有其他的实现方式,如:WorkPress、GitHubPage + Jekell等等。

    配置必要环境

    安装Node.js

    ** ? : 用到nodejs的包管理器 npm **

    git(Xcode自带)

    ** ? : 或借助三方软件,如SourceTree,SVN **

    GitHub申请个账号,作为程序员必须的

    ** ? : 用来做博客的远程仓库、调整域名、源码的服务器的,怎么与本地hexo建立连接下面讲。SSH Keys,可以不配,不配的话以后每次对自己的博客有改动部署的时候就要手动输入账号密码,配置了就不需要了,怎么配置网上有很多教程
    **

    安装HEXO

    1. 打开终端中输入:

      $ sudo npm install -g hexo

    2. 安装完成, 执行Hexo 命令,** 初始化本地博客仓库** 两种创建方式。如下

      • 创建一个文件夹,如:myblog,cd到myblog里执行命令:

        $hexo init

      • cd 到 desktop(or 你想去的地方~) 也可以直接

        $ hexo init mybolg

    3. ** 生成静态网页**
      $ hexo genrate 或 hexo g

    4. ** 本地预览 ** 在终端中 cd 到你的本地博客仓库(就是myblog文件夹,我怕我看不懂,hahaha~)执行:

      $ hexo s

    上述步骤完成。 博客的基本框架就基本构建完成,简单吧! hahaha~, 坑不在这。。。
    Hexo 默认的博客主题是landscape主题,后面介绍怎么更换主题及链接Github。下面来试下本地的博客预览效果

    终端命令图


    填写仓库名称:注意 Respository name 中一定要输入:你的用户名.github.io,然后点击”Create repository“ 按钮完成创建即可。
    不是用户名.github.io,最终的后果是显示404页面。故,在这略微留意一下。具体如下图所示:


    以上要注意

    创建好库,下面打开本地建好的本地博客仓库myBlog,目录如下:

    myBlog
     |
     |-- _config.yml
     |-- node_modules
     |-- public
     |-- source
     |-- db.json
     |-- package.json
     |-- scaffolds
     |-- themes

    现在我们需要_config.yml文件,来建立与GitHub关联,命令:
    $ vim _config.yml
    翻到最下面,改成我这样子的,注意:** : 后面要有空格**

    deploy:
      type: git
      repository: https://github.com/cl9000/cl9000.github.io.git
      branch: master
    

    改完后 esc + :wq 保存退出或者用文本编辑器更改

    执行如下命令才能使用git部署:

    npm install hexo-deployer-git --save
    

    网上会有很多说法,有的type是github, 还有repository 最后面的后缀也不一样,是github.com.git,我也踩了很多坑,我现在的版本是hexo: 3.2.2,执行命令hexo -vsersion就出来了,貌似3.0后全部改成我上面这种格式了。 忘了说了,我没用SSH Keys如果你用了SSH Keys的话直接在github里复制SSH的就行了,总共就两种协议,相信你懂的。
    然后,执行部署命令:
    $ hexo deploy
     然后再浏览器中输入http://cl9000.github.io/就行了,我的 github 的账户叫 cl9000 ,把这个改成你 github 的账户名就行了,就可以访问了

    部署步骤:

    每次部署的步骤,可按以下三步来进行。

    $ hexo clean        清理缓存干掉public
    $ hexo generate     重新生成静态文件
    $ hexo deploy       部署到Github
    
    一些常用 hexo 命令:
    $ hexo new "postName" #新建文章
    $ hexo new page "pageName" #新建页面
    $ hexo generate #生成静态页面至public目录
    $ hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
    $ hexo deploy #将.deploy目录部署到GitHub
    $ hexo help  #查看帮助
    $ hexo version  #查看Hexo的版本
    

    这是Github上的,主题列表github上都有详细介绍,自己研究吧

    一些基本修改路径
    • 文章在 source/_posts,编辑器可以用 Sublime、Mweb,支持 markdown 语法。
    • 如果想修改头像可以直接在主题的 _config.yml 文件里面修改,友情链接、分享、评论等的都在这。
    • 修改站名在 public/index.html 里修改。

    开始打理你的博客吧,有什么问题或者建议,都可以提出来,我会继续完善的。

    相关文章

      网友评论

          本文标题:HEXO搭建个人博客章

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