搭建此博客是由於經過github上了解到github pages進而知道了能夠把靜態網頁博客託管給github倉庫
或許您已經通Git + Hexo 搭建我的博客網站了解到如何經過HEXO + GIT 實現我的博客網站的創建。可是儘管您已經成功創建博客網站,可是你須要對網站作合適的配置和調整才能迎合你的網站要求。本文主要介紹HEXO的基本操做命令和網站的基本配置方法。
<!--more-->css
Github Pages 是 github 公司提供的免費的靜態網站託管服務,用起來方便並且功能強大,不只沒有空間限制(爲免費用戶提供了500M空間),還能夠綁定本身的域名。
到 https://pages.github.com/ 上,看到能夠建立的網站有兩類,一類是爲本身或者是本身的組織建立站點,就是新建一個倉庫,倉庫的名字叫作,username.github.io 或者是 orgnizationname.github.io ,注意這裏的 username 和 orgnizationname 要嚴格替換成你本身的用戶名或者組織名,大小寫也要區分,否則就會有問題。而後就往倉庫裏面放頁面內容就好了。第二類是爲項目建立網站,這個其實主要步驟都是同樣的,只不過稍微比建立用戶或組織網站複雜一點點。
具體的能夠看這個網址的講解Github Pageshtml
我是在萬網註冊的域名和設置DNS解析,因此我只會講在阿里雲下的域名綁定。
進入到控制檯後點擊本身剛買的域名進入域名管理界面,而後進行添加解析操做,按照途中所給的值填寫,注意將記錄值改成本身的github pages地址
最後一步必須在所創建的github倉庫的主分支裏創建一個CNAME文件內容爲你要解析到的目地地址前端
Hexo博客搭建的基礎大體流程爲:
安裝Node.js →安裝Git → 安裝Hexo → 安裝主題 → 本地測試運行 → 註冊給github與coding並建立pages倉庫 → 部署
Node.js和git的安裝你們本身去網上搜下,當以上都安好後能夠經過git bash來輸入命令查看是否安裝成功以及對應的版本jquery
隨後執行下述命令來安裝hexogit
npm install -g hexo-cli
安裝完成後要先提早建好一個文件夾,因此我在本身D盤創建了一個hexo文件夾,裏面隨後剪了一個blog文件夾,用命令cd到blog這個目錄github
cd d:/hexo/blog
執行命令web
hexo init # hexo會在目標文件夾創建網站所須要的全部文件 npm install # 安裝依賴包
本地啓動ajax
有了必要的各類配置文件以後就能夠在本地預覽效果了shell
hexo g # 等同於hexo generate,生成靜態文件到public文件夾 hexo s # 等同於hexo server,在本地服務器運行
還有個命令npm
hexo clean #做用爲清除靜態文件夾的內容並刪掉,主要用於更改變動了某些地方致使頁面顯示不完善
以後打開瀏覽器並輸入IP地址 http://localhost:4000/ 查看,效果以下
hexo new "title" # 生成新文章:\source\_posts\title.md hexo new page "title" # 生成新的頁面,後面可在主題配置文件中配置頁面
生成文章或頁面的模板放在博客文件夾根目錄下的 scaffolds/ 文件夾裏面,文章對應的是 post.md ,頁面對應的是page.md,草稿的是draft.md
打開新建的文章source_postspostName.md,其中postName是hexo new "title"中的title
--- title: Start My Blog Trip — Power By Hexo # 文章頁面上的顯示名稱,能夠任意修改,不會出如今URL中 date: 2017-2-10 23:49:28 # 文章生成時間,通常不改 categories: diary # 文章分類目錄,多個分類使用[a,b,c]這種格式 tags: [Hexo,diary] # 文章標籤 --- #這裏開始使用markdown格式輸入你的正文。 <!--more--> #more標籤如下的內容要點擊「閱讀全文」才能看見,#more標籤以上的內容爲你首頁顯示文章的摘要部分
若是你對MD語法不熟悉,推薦你去馬克飛象使用它的在線網頁編輯,能夠實現一邊打字一邊查看效果,很方便。
地址:https://maxiang.io/
hexo init [folder] # 初始化一個網站。若是沒有設置 folder ,Hexo 默認在目前的文件夾創建網站 hexo new [layout] <title> # 新建一篇文章。若是沒有設置 layout 的話,默認使用 _config.yml 中的 default_layout 參數代替。若是標題包含空格的話,請使用引號括起來 hexo version # 查看版本 hexo clean # 清除緩存文件 (db.json) 和已生成的靜態文件 (public) hexo g # 等於hexo generate # 生成靜態文件 hexo s # 等於hexo server # 本地預覽 hexo d # 等於hexo deploy # 部署,可與hexo g合併爲 hexo d -g
截止2017年,hexo和next都在更新,現今網上的版本和其對應的配置文件都已經發生了巨大的變化,因此我把官網最新的17年的版本配置文件的詳情給你們來說解,你們能夠下最新的版本和看個人配置進行修改。
hexo主題有不少,這裏我本身使用的next主題因此就以它來說。個人版本爲v5.1.0(目前最新)
下載地址:
https://github.com/iissnan/hexo-theme-next/releases
把下來的文件夾解壓和改名爲next,並複製到theme目錄下
在根目錄下的_config.yml主要是對網站的總屬性進行設置 如:網站標題,網站logo,網站插件使用等全局的屬性 主題目錄下的_config.yml主要是針對網站的佈局,導航等特性設置進行設置
個人根目錄配置文件
# Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html ## Source: https://github.com/hexojs/hexo/ # Site title: Water Sister's Blog subtitle: 生活、技術我的博客 description: 思考中..... author: Yang ZiHao language: zh-Hans timezone: # URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: http://www.cduyzh.com root: / permalink: :title/ permalink_defaults: # Directory source_dir: source public_dir: public tag_dir: tags archive_dir: archives category_dir: categories code_dir: downloads/code i18n_dir: :lang skip_render: - baidu_verify_n9RJHacKra.html - google5caece7c800b9ce3.html # Writing new_post_name: :title.md # File name of new posts default_layout: post titlecase: false # Transform title into titlecase external_link: true # Open external links in new tab filename_case: 0 render_drafts: false post_asset_folder: true relative_link: false future: true highlight: enable: true line_number: true auto_detect: false tab_replace: # Category & Tag default_category: uncategorized category_map: tag_map: # Date / Time format ## Hexo uses Moment.js to parse and display date ## You can customize the date format as defined in ## http://momentjs.com/docs/#/displaying/format/ date_format: YYYY-MM-DD time_format: HH:mm:ss # Pagination ## Set per_page to 0 to disable pagination per_page: 10 pagination_dir: page # Extensions Plugins: - hexo-generator-sitemap - hexo-generator-baidu-sitemap ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: next # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: github: git@github.com:cduyzh/cduyzh.github.io.git,master index_generator: per_page: 5 archive_generator: per_page: 20 yearly: true monthly: true tag_generator: per_page: 10 menu: about: /about #頭像設置 avatar: /images/yzh.jpg # 多說熱評文章 true 或者 false duoshuo_hotartical: true #sitemap # hexo sitemap sitemap: path: sitemap.xml baidusitemap: path: baidusitemap.xml #local search search: path: search.xml field: post format: html limit: 1000
個人主題目錄配置文件
# --------------------------------------------------------------- # Site Information Settings # --------------------------------------------------------------- # Put your favicon.ico into `hexo-site/source/` directory. favicon: /images/favicon.ico # Set default keywords (Use a comma to separate) keywords: "cduyzh前端開發博客" # 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 # icon between year and author @Footer authoricon: tint # Footer `powered-by` and `theme-info` copyright copyright: false # Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog. # See: https://support.google.com/webmasters/answer/139066 # Tips: Before you open this tag, remember set up your URL in hexo _config.yml ( ex. url: http://yourdomain.com ) canonical: true # Change headers hierarchy on site-subtitle (will be main site description) and on all post/pages titles for better SEO-optimization. seo: true # --------------------------------------------------------------- # 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 #sitemap: /sitemap.xml life: /categories/life technology: //categories/technology # 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 FontAwesome 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 schedule: calendar tags: tags archives: archive sitemap: sitemap commonweal: heart life: coffee technology: cog # --------------------------------------------------------------- # 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 italic, 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: Lato # 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: size: # Font settings for <code> and code blocks. codes: external: true family: size: # --------------------------------------------------------------- # 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: #LinkLabel: Link GitHub: https://github.com/cduyzh 知乎: https://www.zhihu.com/people/yang-zi-hao-cheng-du-da-xue Weibo: http://weibo.com/3290722423/ QQ: http://wpa.qq.com/msgrd?v=3&uin=450311265&site=qq&menu=yes # 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 FontAwesome 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. # KeyMapsToSocialItemKey: NameOfTheIconFromFontAwesome GitHub: github #Twitter: twitter Weibo: weibo QQ: qq # Sidebar Avatar # in theme directory(source/images): /images/avatar.jpg # in site directory(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: # - post expand on posts automatically. Default. # - always expand for all pages automatically # - hide expand only when click on the sidebar toggle icon. # - remove Totally remove sidebar including sidebar toggle. #display: post display: always #display: hide #display: remove # Sidebar offset from top menubar in pixels. offset: 12 offset_float: 0 # Back to top in sidebar b2t: false # Scroll percent label in b2t button scrollpercent: false # Blog rolls links_title: Links #links_layout: block #links_layout: inline links: hexo: https://hexo.io/zh-cn/ next: http://theme-next.iissnan.com/ web project: http://www.watersister.top # --------------------------------------------------------------- # Post Settings # --------------------------------------------------------------- # Automatically scroll page to section which is under <!-- more --> mark. scroll_to_more: true # Automatically excerpt description in homepage as preamble text. excerpt_description: true # Automatically Excerpt. Not recommend. # Please use <!-- more --> in the post to control excerpt accurately. auto_excerpt: enable: true length: 400 # Post meta display settings post_meta: item_text: true created_at: true updated_at: false categories: true # Post wordcount display settings # Dependencies: https://github.com/willin/hexo-wordcount post_wordcount: item_text: true wordcount: true min2read: true #Wechat Subscriber #wechat_subscriber: # enabled: true # qcode: /images/wechatpay.jpg # description: subscribe to my blog by scanning my public wechat account # --------------------------------------------------------------- # 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: false image: # Code Highlight theme # Available value: # normal | night | night eighties | night blue | night bright # https://github.com/chriskempson/tomorrow-theme highlight_theme: night # --------------------------------------------------------------- # Third Party Services Settings # --------------------------------------------------------------- # MathJax Support mathjax: enable: false per_page: 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: cduyzh # Disqus #disqus_shortname: # Hypercomments #hypercomments_id: # Gentie productKey #gentie_productKey: # Support for youyan comments system. # You can get your uid from http://www.uyan.cc #youyan_uid: your uid # Support for LiveRe comments system. # You can get your uid from https://livere.com/insight/myCode (General web site) #livere_uid: your uid # Baidu Share # Available value: # button | slide # Warning: Baidu Share does not support https. #baidushare: ## type: button # Share #jiathis: # Warning: JiaThis does not support https. #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: # Yandex Webmaster tools verification setting # See: https://webmaster.yandex.ru/ #yandex_site_verification: # CNZZ count #cnzz_siteid: # Application Insights # See https://azure.microsoft.com/en-us/services/application-insights/ # application_insights: # 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: false user_id: 6224774254659896065 admin_nickname: author # 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 # Facebook comments plugin # This plugin depends on Facebook SDK. # If facebook_sdk.enable is false, Facebook comments plugin is unavailable. facebook_comments_plugin: enable: false num_of_posts: 10 # min posts num is 1 width: 100% # default width is 550px scheme: light # default scheme is light (light or dark) # VKontakte API Support. # To get your AppID visit https://vk.com/editapp?act=create vkontakte_api: enable: false app_id: #<app_id> like: true comments: true num_of_posts: 10 # Show number of visitors to each article. # You can visit https://leancloud.cn get AppID and AppKey. leancloud_visitors: enable: true app_id: TxBSdzFliqxOpec29xEd8pO5-gzGzoHsz app_key: 5rH911Nhs9V7AWFjEYqe8Bz7 # 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: true # 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: false page_pv_header: <i class="fa fa-file-o"></i> 點擊量 page_pv_footer: 次 # Tencent analytics ID # tencent_analytics: # Tencent MTA ID # tencent_mta: # Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO baidu_push: true # Google Calendar # Share your recent schedule to others via calendar page # # API Documentation: # https://developers.google.com/google-apps/calendar/v3/reference/events/list calendar: enable: false calendar_id: <required> api_key: <required> orderBy: startTime offsetMax: 24 offsetMin: 4 timeZone: showDeleted: false singleEvents: true maxResults: 250 # Algolia Search algolia_search: enable: false hits: per_page: 10 labels: input_placeholder: Search for Posts hits_empty: "We didn't find any results for the search: ${query}" hits_stats: "${hits} results found in ${time} ms" # Local search local_search: enable: true # External URL with BASE64 encrypt & decrypt # Usage: {% exturl text url "title" %} # Alias: {% extlink text url "title" %} exturl: false #! --------------------------------------------------------------- #! DO NOT EDIT THE FOLLOWING SETTINGS #! UNLESS YOU KNOW WHAT YOU ARE DOING #! --------------------------------------------------------------- # Motion use_motion: true # Fancybox fancybox: true # Canvas-nest canvas_nest: true # 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. # Please use the https protocol of CDN files when you enable https on your site. vendors: # Internal path prefix. Please do not edit it. _internal: lib # Internal version: 2.1.3 jquery: //cdn.bootcss.com/jquery/2.1.3/jquery.min.js # Internal version: 2.1.5 # Fancybox: http://fancyapps.com/fancybox/ fancybox: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.pack.js fancybox_css: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css # Internal version: 1.0.6 fastclick: //cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js # Internal version: 1.9.7 # See: https://github.com/tuupola/jquery_lazyload lazyload: //cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js # Internal version: 1.2.1 velocity: # Internal version: 1.2.1 velocity_ui: # Internal version: 0.7.9 # See: https://faisalman.github.io/ua-parser-js/ ua_parser: # Internal version: 4.6.2 # See: http://fontawesome.io/ fontawesome: //cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css # Internal version: 1 # https://www.algolia.com algolia_instant_js: algolia_instant_css: # Internal version: 1.0.0 # https://github.com/hustcc/canvas-nest.js canvas_nest: //cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js # Assets css: css js: js images: images # Theme version version: 5.1.0 # 多說熱評文章 true 或者 false duoshuo_hotartical: true reward_comment: 堅持原創技術分享,您的支持將鼓勵我繼續創做! wechatpay: /images/wechatpay.jpg alipay: /images/alipay.jpg
PS:能夠不用一次性看完,理解下各個屬性便可,官網也沒有對全部配置的中文解釋,只有一些例子配置對應的參數而已。
相信絕大數人都沒看完,你們能夠後面本身配置的時候再來看。
打開站點配置文件, 找到 theme 字段,並將其值更改成 next
theme: next
注意:後有個空格必需要有空格哦
而後 hexo s 便可在localshost:4000地址裏預覽主題效果
next有三個主題樣式
# Schemes #scheme: Muse scheme: Mist #scheme: Pisces
我用的是第二個
更換語言爲中文,在根目錄配置文件下配置language: zh-Hans
# Site title: Water Sister's Blog subtitle: 生活、技術我的博客 description: 思考中..... author: Yang ZiHao language: zh-Hans timezone:
在主題目錄配置文件下設置
# Put your favicon.ico into `hexo-site/source/` directory. favicon: /images/favicon.ico
大部分的設定都能在NexT的官方文檔 裏面找到,如側欄、頭像、打賞、評論、訂閱、鏈接、分享、數據統計等等,在此就很少講了,照着文檔走就好了,接下只是個性定製的問題。
因此給個官方文檔你們能夠本身去看一遍:
http://theme-next.iissnan.com/theme-settings.html
假設前面已經註冊了github賬號和建立了對應的倉庫,經過配置SSH來創建鏈接。
$ ssh-keygen -t rsa -C "郵件地址@youremail.com" Generating public/private rsa key pair. Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回車>
系統會要求你輸入密碼,這裏設置的密碼主要是在你提交Git時彈出密碼認證,不想輸入直接回車
Enter passphrase (empty for no passphrase):<輸入加密串> Enter same passphrase again:<再次輸入加密串>
成功後如圖:
找到id_rsa.pub 並複製文件內容
id_rsa.pub文件通常位於電腦用戶配置文件夾下的一個.ssh文件下C:Users你的用戶名.ssh
登陸Github並添加密鑰
進入github首頁在右上角選擇settings設置。
建立一個新的SSH key,圖中顯示我已經建立好了。
title能夠隨便取
連接Git
$ ssh -T git@github.com
提示以下:yes
The authenticity of host 'github.com (207.65.227.44)' can't be established. RSA key fingerprint is 16:27:42:18:60:1d:7b:13:d2:b5:c4:20:7e:56:86:d8:71:f3 Are you sure you want to continue connecting (yes/no)?
如下爲成功連接到Git
Hi XXXX! You've successfully authenticated, but GitHub does not provide shell access.
使用Git bash簡單的設置一下用戶信息:
git config --global user.name your name git config --global user.email your_email@youremail.com
在此以前,先安裝Git部署插件
npm install hexo-deployer-git --save
打開根目錄配置文件,拉到底部,修改部署配置:
deploy: type: git repo: github: git@github.com:cduyzh/cduyzh.github.io.git,master
注意冒號後面是網站對應的用戶名,接着就是/,而後再是你的項目名加上 .git,master
保存後終端執行
hexo clean hexo g hexo d
結果以下爲成功上傳
到這裏基本上完成了hexo的配置和項目的上傳,後面我會講一些文章的編輯,分類,標籤的運用,還會對next主題進行一些分析,若是想本身設置主題和樣式建議先把next主題的官方中文文檔看一下,我會對其中的一些進行解釋。