使用hexo+coding搭建免費個人部落格
摘要：
1.檢測node和npm
先檢測一下有沒有node.js和npm
$ node -v
//如果有，說明node.js安裝成功！
$ node -v
v8.4.0
//如果有，說明npm安裝成功！
$npm -v
$ npm -v
5.3.0
2.安裝he...
1.檢測node和npm
先檢測一下有沒有 node.js 和 npm
$ node -v //如果有，說明node.js安裝成功！ $ node -v v8.4.0 //如果有，說明npm安裝成功！ $npm -v $ npm -v 5.3.0
2.安裝hexo
在git-bash中執行以下命令安裝hexo
安裝hexo全域性
$ npm install -g hexo-cli
建立資料夾
hexo init blog cd blog npm install
然後執行
$ npm install
就能夠建立起一個本地的伺服器，埠是4000，開啟瀏覽器 ofollow,noindex" target="_blank">http://localhost:4000 就能訪問屬於你自己的部落格了。
3.切換主題
主題程式碼拷貝
主題的拷貝也是直接使用 git 即可，首先進入到你部落格的根目錄，再開啟 git-bash 執行
git clone https://github.com/iissnan/hexo-theme-next themes/next
啟用主題
在部落格根目錄下找到 _config.yml 檔案，找到裡面的 theme，改為
theme: next
這時再執行一次 hexo s ，看看主題有沒有生效吧。
4.釋出到coding
前提是你先註冊一個 coding 賬號
hexo 提供了一個部署命令 hexo deploy，首先需要安裝一下 hexo-deployer-git外掛
npm install hexo-deployer-git --save
然後配置一下_config.yml 檔案：
deploy: type: git repoistory: https://git.coding.net/codinggq/problog.git branch: master
預覽效果
在 coding 上建立一個私人倉庫，找到程式碼的 coding 地址，填好上面的配置，然後直接執行
hexo deploy
不出意外的話會讓你填寫 coding 的使用者名稱和密碼完成上傳操作。如果你有配置 ssh 方式的話就更加方便了。
這個時候再到 coding 對應的專案裡面開啟 pages 服務，根據 coding 建議，因為不是 jekyll 專案，所以需要再新建一個.nojekyll 檔案（空檔案就行，其實不建立也行），等上一會就能夠訪問自己的部落格了。
最後執行以下命令上傳到coding
$ hexo g $ hexo d
如果不行用git,輸入以下命令
mkdir problog cd problog git init echo "# problog" >> README.md git add README.md git commit -m "first commit" git remote add origin https://git.coding.net/codinggq/problog.git git push -u origin master
NEXT主題配置檔案示例:
# --------------------------------------------------------------- # Site Information Settings # --------------------------------------------------------------- # Put your favicon.ico into `hexo-site/source/` directory. favicon: /favicon.ico # Set default keywords (Use a comma to separate) keywords: "觀奇筆記" # Set rss to false to disable feed link. # Leave rss as empty to use site's feed link. # Set rss to specific value if you have burned your feed already. rss: # Specify the date when the site was setup #since: 2015 # --------------------------------------------------------------- # Menu Settings # --------------------------------------------------------------- # When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives) menu: home: / # categories: /categories about: /about archives: /archives # tags: /tags commonweal: /404.html # Enable/Disable menu icons. # Icon Mapping: #Map a menu item to a specific FontAwesome icon name. #Key is the name of menu item and value is the name of FontAwsome icon. Key is case-senstive. #When an question mask icon presenting up means that the item has no mapping icon. menu_icons: enable: true #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome home: home about: user categories: th tags: tags archives: archive commonweal: heartbeat # --------------------------------------------------------------- # Scheme Settings # --------------------------------------------------------------- # Schemes #scheme: Muse scheme: Mist #scheme: Pisces # --------------------------------------------------------------- # Font Settings # - Find fonts on Google Fonts (https://www.google.com/fonts) # - All fonts set here will have the following styles: #light, light italic, normal, normal intalic, bold, bold italic # - Be aware that setting too much fonts will cause site running slowly # - Introduce in 5.0.1 # --------------------------------------------------------------- font: enable: true # Uri of fonts host. E.g. //fonts.googleapis.com (Default) host: # Global font settings used on <body> element. global: # external: true will load this font family from host. external: true family: monaco,"PingFang SC",sans-serif,"Microsoft YaHei" # Font settings for Headlines (h1, h2, h3, h4, h5, h6) # Fallback to `global` font settings. headings: external: true family: # Font settings for posts # Fallback to `global` font settings. posts: external: true family: # Font settings for Logo # Fallback to `global` font settings. # The `size` option use `px` as unit logo: external: true family: Lobster Two size: 24 # Font settings for <code> and code blocks. codes: external: true family: monaco,consolas, Menlo, size: 16 # --------------------------------------------------------------- # Sidebar Settings # --------------------------------------------------------------- # Social Links # Key is the link label showing to end users. # Value is the target link (E.g. GitHub: https://github.com/iissnan) social: GitHub: https://github.com/hardesyy 微博: http://weibo.com/hardesyy 知乎: https://www.zhihu.com/people/fengjun17 # Social Links Icons # Icon Mapping: #Map a menu item to a specific FontAwesome icon name. #Key is the name of the item and value is the name of FontAwsome icon. Key is case-senstive. #When an globe mask icon presenting up means that the item has no mapping icon. social_icons: enable: true # Icon Mappings. # KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome GitHub: github 微博: weibo 知乎: weibo # Sidebar Avatar # in theme directory(source/images): /images/avatar.jpg # in sitedirectory(source/uploads): /uploads/avatar.jpg #avatar: # Table Of Contents in the Sidebar toc: enable: true # Automatically add list number to toc. number: true # Creative Commons 4.0 International License. # http://creativecommons.org/ # Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero #creative_commons: by-nc-sa #creative_commons: sidebar: # Sidebar Position, available value: left | right position: left #position: right # Sidebar Display, available value: #- postexpand on posts automatically. Default. #- alwaysexpand for all pages automatically #- hideexpand only when click on the sidebar toggle icon. #- removeTotally remove sidebar including sidebar toggler. display: post #display: always #display: hide #display: remove # Blogrolls links_title: Links #links_layout: block #links_layout: inline links: 劉洋: http://www.lyblog.net/ 廖雪峰: http://www.liaoxuefeng.com/ 阮一峰: http://www.ruanyifeng.com/blog/ FED: http://taobaofed.org/ FEX: http://fex.baidu.com/ 奇舞團: http://www.75team.com/ AlloyTeam: http://www.alloyteam.com/ CDC: http://cdc.tencent.com/ ISUX: http://isux.tencent.com/ TGideas: http://tgideas.qq.com/ Nodejs API: http://nodeapi.ucdok.com/ # --------------------------------------------------------------- # Misc Theme Settings # --------------------------------------------------------------- # Custom Logo. # !!Only available for Default Scheme currently. # Options: #enabled: [true/false] - Replace with specific image #image: url-of-image- Images's url custom_logo: enabled: true image: https://coding.net/static/project_icon/scenery-15.png # Code Highlight theme # Available value: #normal | night | night eighties | night blue | night bright # https://github.com/chriskempson/tomorrow-theme highlight_theme: night eighties # Automatically scroll page to section which is under <!-- more --> mark. scroll_to_more: true # Automatically Excerpt. Not recommand. # Please use <!-- more --> in the post to control excerpt accurately. auto_excerpt: enable: false length: 150 # Wechat Subscriber #wechat_subscriber: #enabled: true #qcode: /path/to/your/wechatqcode ex. /uploads/wechat-qcode.jpg #description: ex. subscribe to my blog by scanning my public wechat account # 打賞 reward_comment: 堅持原創技術分享，您的支援將鼓勵我繼續創作！ wechatpay: /uploads/wxpay.png alipay: /uploads/alipay.jpg # --------------------------------------------------------------- # Third Party Services Settings # --------------------------------------------------------------- # MathJax Support mathjax: enable: false cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML # Swiftype Search API Key #swiftype_key: # Baidu Analytics ID #baidu_analytics: # Duoshuo ShortName duoshuo_shortname: "fengjun" # Disqus #disqus_shortname: # Baidu Share # Available value: #button | slide #baidushare: ##type: button # Share #jiathis: #add_this_id: # Share duoshuo_share: true # Google Webmaster tools verification setting # See: https://www.google.com/webmasters/ #google_site_verification: # Google Analytics #google_analytics: # CNZZ count #cnzz_siteid: # Make duoshuo show UA # user_id must NOT be null when admin_enable is true! # you can visit http://dev.duoshuo.com get duoshuo user id. duoshuo_info: ua_enable: true admin_enable: true user_id: 0 admin_nickname: "馮教授" # Facebook SDK Support. # https://github.com/iissnan/hexo-theme-next/pull/410 facebook_sdk: enable: false app_id:#<app_id> fb_admin:#<user_id> like_button:#true webmaster:#true search: path: search.xml field: post format: html limit: 10000 # Show number of visitors to each article. # You can visit https://leancloud.cn get AppID and AppKey. leancloud_visitors: enable: true app_id: "icBW7OnYytaPAOf6yjFE7a1M-gzGzoHsz" app_key: "uclxPv0g8Ebku9LNqoD5XX1B" # Show PV/UV of the website/page with busuanzi. # Get more information on http://ibruce.info/2015/04/04/busuanzi/ busuanzi_count: # count values only if the other configs are false enable: false # custom uv span for the whole site site_uv: true site_uv_header: <i class="fa fa-user"></i> site_uv_footer: # custom pv span for the whole site site_pv: true site_pv_header: <i class="fa fa-eye"></i> site_pv_footer: # custom pv span for one page only page_pv: true page_pv_header: <i class="fa fa-file-o"></i> page_pv_footer: # Tencent analytics ID tencent_analytics: "59595400" # Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO baidu_push: true #! --------------------------------------------------------------- #! DO NOT EDIT THE FOLLOWING SETTINGS #! UNLESS YOU KNOW WHAT YOU ARE DOING #! --------------------------------------------------------------- # Motion use_motion: true # Fancybox fancybox: true # since since: 2013 # Wechat Subscriber wechat_subscriber: enabled: true qcode: /uploads/wechat-qcode.jpg description: 掃一掃,關注我！ # Script Vendors. # Set a CDN address for the vendor you want to customize. # For example #jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js # Be aware that you should use the same version as internal ones to avoid potential problems. vendors: # Internal path prefix. Please do not edit it. _internal: vendors # Internal version: 2.1.3 jquery: # Internal version: 2.1.5 # http://fancyapps.com/fancybox/ fancybox: fancybox_css: # Internal version: 1.0.6 # https://github.com/ftlabs/fastclick fastclick: # Internal version: 1.9.7 # https://github.com/tuupola/jquery_lazyload lazyload: # Internal version: 1.2.1 # http://VelocityJS.org velocity: # Internal version: 1.2.1 # http://VelocityJS.org velocity_ui: # Internal version: 0.7.9 # https://faisalman.github.io/ua-parser-js/ ua_parser: # Internal version: 4.4.0 # http://fontawesome.io/ fontawesome: # Assets css: css js: js images: images # Theme version version: 5.0.1
5.寫在最後
這是一種比較經濟實惠的搭建專屬於自己個人部落格的方法。
最後，祝願大家程式員節日快樂！
