使用hexo搭建屬於自己的博客


如果你喜歡擁有自己的博客域名,如果你喜歡折騰,可以先點擊luckykun.com,看看效果,再選擇要不要進來看看~~~

之前一直都在博客園寫博客,不過最近在逛園子的時候不小心看到了hexo,簡直有種相見恨晚的感覺呀!在github上創建自己的開源博客,維護方便,主題多多,更重要的是,終於找到只屬於自己的小窩啦!也希望自己能堅持寫文_

為了引起讀者的興趣,先介紹一下,搭建完成之后,只需這幾個簡單常用的命令,就能夠輕松維護自己的博客了:

$ hexo new(n)    //寫文章
$ hexo generate(g)    //把文章生成頁面
$ hexo server(s)    //啟動本地服務調試
$ hexo deploy(d)    //部署到github 可與hexo g合並為 hexo d -g

折騰了大半天,終於搭建好了自己的博客點這里去看看。不過在這中途,也是歷經了九九八十一難呀,所以,我懷着激動心情,把我在這個過程中遇到的坑作為第一篇博客一一記錄下來,希望能幫到后面的學者。

  • 備注1:如果喜歡以官方教程為主的,點這里hexo官方文檔
  • 備注2:網上大多教程是都是hexo2.x版本的,所以有很多坑。因此以下教程是針對hexo的版本為3.x以上的,大家放心使用。

准備工作

  • 安裝node
    Node.js官網下載相應平台的最新版本,一路安裝即可。

  • 安裝git
    根據系統不同安裝相應的git環境。mac系統不多說,windows一般安裝msysgit。下面是我本地msysgit的截圖,也還是挺好用的:

  • 安裝hexo
    使用以下命令安裝hexo到全局

    $ npm install -g hexo
    

    然后輸入命令hexo -v輸入hexo的版本號即為安裝成功。

  • github准備

    • 博客是在github上托管維護的,所以當然需要一個github的賬號了。然后創建一個名為jarson7426.github.io的倉庫。

    • 其中‘jarson7426’是我的賬戶名,下文同理。

    • 除此之外,相信大多數人都知道,要想使用git命令來和github進行提交部署等操作,需要進行一些配置,大概就是下面一些命令,如不明白請自行搜索。

      git config --global user.email xxx@163.com
      git config --global user.name xxx
      ssh-keygen -t rsa -C xxx@163.com(郵箱地址)      // 生成ssh
      找到.ssh文件夾打開,使用cat id_rsa.pub    //打開公鑰ssh串
      登陸github,settings - SSH keys  - add ssh keys(把上面的內容全部添加進去即可)
      

初始化

ok,環境都准備好了,開始激動人心的步驟了,搭建博客。

在某個地方新建一個項目文件夾(比如Blog),然后進入Blog目錄,以下所有的命令行操作都是在這個文件夾下進行的。

$ hexo init

生成靜態頁面

初始化完成之后,就已經生成一篇“hello word”的文章了,現在執行以下命令把文章編譯為靜態頁面:

$ hexo generate

本地啟動

把文章變為頁面之后,可以執行以下命令,本地啟動服務,在瀏覽器中輸入http://localhost:4000/查看生成的頁面效果。

$ hexo server

如果你看到了下面這個畫面,恭喜你,你成功了!

更換主題

上面的博客效果是hexo自己默認的主題landscape,如果你滿足與它,可以跳過這個步驟,直接進行下一步。但是我卻還不夠滿足,因為我發現了一個頁面交互人性化,並且完美兼容不同終端顯示的主題yilia,貌似這個主題受歡迎程度很高呀,說明我的審美還是不錯啊,哈哈~~

下面貼出github上star數量最多的前10個主題:

1.iissnan/hexo-theme-next, 3510個star。
2.litten/hexo-theme-yilia, 1703個star。
3.TryGhost/Casper, 679個star。
4.wuchong/jacman, 503個star。
5.A-limon/pacman, 431個star。
6.daleanthony/uno, 416個star。
7.orderedlist/modernist, 367個star。
8.AlxMedia/hueman, 336個star。
9.kathyqian/crisp-ghost-theme, 303個star。
10.xiangming/landscape-plus, 287個star。

  • clone主題代碼
    在目錄下執行下面的命令clone主題代碼:

    $ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
    
  • 修改配置文件
    修改Blog/_config.yml文件:

    theme: yilia    //默認為landscape
    

    修改themes/yilia/_config.yml文件:

    # Header
    menu:
        主頁: /
        所有文章: /archives
        絲茉茉: /categories/simomo/
        相冊: /photos
    # SubNav
    subnav:
        github: "https://github.com/jarson7426"
         weibo: "http://weibo.com/u/2732624311"
        zhihu: "#"
        rss: /atom.xml
    # Content
    excerpt_link: 閱讀全文
    fancybox: true
    mathjax: true
    top: true
    # 是否開啟動畫效果
    animate: true
    # 是否在新窗口打開鏈接
    open_in_new: false
    # Miscellaneous
    google_analytics: ''
    favicon: /favicon.ico
    #你的頭像url
    avatar: /img.png
    #是否開啟分享
    share_jia: true
    share_addthis: false
    #是否開啟多說評論,填寫你在多說申請的項目名稱 duoshuo: duoshuo-key
    #若使用disqus,請在博客config文件中填寫disqus_shortname,並關閉多說評論
    duoshuo: jarson7426
    #是否開啟雲標簽
    tagcloud: true
    #是否開啟友情鏈接
    #不開啟——
    friends: false
    #開啟——
    #friends:
    #  百度一下: http://www.baidu.com
    #  淘寶商城: http://www.taobao.com
    #是否開啟“關於我”。
    #不開啟——
    #aboutme: false
    #開啟——
    aboutme: true
    
  • 查看效果
    更改主題之后可以使用命令hexo server打開本地服務,查看效果。

部署到github

上面所有的操作完成之后,你就可以將你的Blog項目部署到github上了。

  • 部署之前先修改Blog/_config.yml文件。

    deploy:
        type: git
        repository: https://github.com/jarson7426/jarson7426.github.io.git  //jarson7426替換為你自己的用戶名
        branch: master
    

    備注:在hexo3.x版本下,這里的type應該填git,不是github;另外冒號后面都有一個英文的空格,不然會報錯的。

  • 然后使用以下命令進行部署。

    $ hexo deploy
    

    備注:如果執行上述命令報錯,你可以試試下面這個命令再試。

    $ npm install hexo-deployer-git--save
    

部署成功后,你在瀏覽器中輸入jarson7426.github.io,就能看到和本地一樣的效果了。

結語

好了,到這里搭建github博客的步驟就結束了。enjoy it!!!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM