四十五、Gtihub+Hexo+icarus搭建自己的博客
最近我看了hexo的主題,發現了很多好看的主題。很多人的博客就是用別人的主題,搞出來的。之前我的博客發現真的是太難看了,然后沒有去維護。那個時候不知道沒有關系,今天我知道了,就是把之前刪除了。
我在茫茫的主題中發現了它,這個就是大神開發的:https://shen-yu.gitee.io/
對應的Github:https://github.com/Shen-Yu/hexo-theme-ayer
我先去給大神Star了,這個大神牛逼。百度發現教程不足,搭建起來頭疼。遇到問題,Github上又沒有解釋。
最后決定用icarus,好像很多人用這個主題
文章目錄
- 開干
- 修改主題
- 配置主題
- 項目配置
- 寫文章
開干
在本地創建一個博客目錄
hexo init blog上面這個命令執行完后,會在本地創建一個 blog 目錄,然后進入到這個目錄中,執行 npm install 命令,安裝相關的依賴。
現在去_config.yml文件中,做網站的一些基本配置, 網站的 title,描述,關鍵字、圖標等,這些配置搞定。如下
# Site title: 'Python之王' subtitle: 'Python之王' description: '人生最重要的不是所站的位置,而是內心所朝的方向。只要我在每篇博文中寫得自己體會,修煉身心;在每天的不斷重復學習中,耐住寂寞,練就真功,不畏艱難,奮勇前行,不忘初心,砥礪前行,人生定會有所收獲,不留遺憾...' keywords: 'Python, Java, 機器學習, 爬蟲, 前端, Spring家族, 人工智能' author: 'Runsen' language: en timezone: ''配置完成后,定位到 blog 目錄,執行hexo s就可以在本地啟動項目了,瀏覽器中輸入 http://localhost:4000 就可以看到網站了,就是那個最難看的頁面。
補充下hexo的命令
新建GIthub項目,創建 {username}.GIthub.io 的倉庫,
修改主題
Hexo 默認使用的主題是 landscape ,之前使用了 hexo-theme-next 主題,現在我用melody 。
下面就是看官方教程來搞下來。
首先將之克隆到 ./themes 目錄下,這個目錄下原本有有一個 landscape 文件夾,里邊放的默認的樣式,
首先命令行進入到項目的根目錄,執行如下命令即可:
git clone https://github.com/Molunerfinn/hexo-theme-melody themes/melody克隆成功后,修改 hexo 的 _config.yml 文件,將主題修改為 melody,如下:
theme: icarus這個時候就可以跑起來了。
配置主題
主題創建好之后,接下來就是對主題的配置了,這個比較麻煩,直接參考官方文檔和Github教程即可。
下面是我的主題配置
# Version of the configuration file version: 3.0.0 # Icarus theme variant, can be "default" or "cyberpunk" variant: default # Path or URL to the website's logo logo: /img/logo.png # Page metadata configurations head:# URL or path to the website's iconfavicon: /img/avatar.png# Open Graph metadata# https://hexo.io/docs/helpers.html#open-graphopen_graph:# Page title (og:title) (optional)# You should leave this blank for most of the timetitle: # Page type (og:type) (optional)# You should leave this blank for most of the timetype: blog# Page URL (og:url) (optional)# You should leave this blank for most of the timeurl: # Page cover (og:image) (optional)# You should leave this blank for most of the timeimage: # Site name (og:site_name) (optional)# You should leave this blank for most of the timesite_name: # Page author (article:author) (optional)# You should leave this blank for most of the timeauthor: # Page description (og:description) (optional)# You should leave this blank for most of the timedescription: # Twitter card type (twitter:card)twitter_card: # Twitter ID (twitter:creator)twitter_id: # Twitter Site (twitter:site)twitter_site: # Google+ profile link (deprecated)google_plus: # Facebook admin IDfb_admins: # Facebook App IDfb_app_id: # Structured data of the page# https://developers.google.com/search/docs/guides/intro-structured-datastructured_data:# Page title (optional)# You should leave this blank for most of the timetitle: # Page description (optional)# You should leave this blank for most of the timedescription: # Page URL (optional)# You should leave this blank for most of the timeurl: # Page author (article:author) (optional)# You should leave this blank for most of the timeauthor: # Page images (optional)# You should leave this blank for most of the timeimage: # Additional HTML meta tags in an arraymeta:# Meta tag specified in <attribute>=<value> style# E.g., name=theme-color;content=#123456 => <meta name="theme-color" content="#123456">- 'name=theme-color;content=#123456'- 'name=generator;content="Hexo 4.2.0"'# URL or path to the website's RSS atom.xmlrss: /path/to/atom.xmlnavbar:# Navigation bar menu linksmenu: #菜單顯示改為中文首頁: /歸檔: /archives分類: /categories標簽: /tags關于: /about# Links to be shown on the right of the navigation barlinks:Download on GitHub:icon: fab fa-githuburl: 'https://github.com/ppoffice/hexo-theme-icarus' # Page footer configurations footer:# Links to be shown on the right of the footer sectionlinks:Creative Commons:icon: fab fa-creative-commonsurl: 'https://creativecommons.org/'Attribution 4.0 International:icon: fab fa-creative-commons-byurl: 'https://creativecommons.org/licenses/by/4.0/'Download on GitHub:icon: fab fa-githuburl: 'https://github.com/ppoffice/hexo-theme-icarus' # Article related configurations article:# Code highlight settingshighlight:# Code highlight themes# https://github.com/highlightjs/highlight.js/tree/master/src/stylestheme: atom-one-light# Show copy code buttonclipboard: true# Default folding status of the code blocks. Can be "", "folded", "unfolded"fold: unfolded# Whether to show thumbnail image for every articlethumbnail: true# Whether to show estimated article reading timereadtime: true # Search plugin configurations # https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Search/ search:type: insight # Comment plugin configurations # https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Comment/ comment:type: disqus# Disqus shortnameshortname: 'Runsen'avatar: retro # Gravatar style : mm/identicon/monsterid/wavatar/retro/hideplaceholder: 要不要說點啥... # Comment Box placeholder# Donate plugin configurations # https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Donation/ donates:# Alipay donate button configurations-type: alipay# Alipay qrcode image URLqrcode: '/img/alipay.png'# "Buy me a coffee" donate button configurations# Wechat donate button configurations-type: wechat# Wechat qrcode image URLqrcode: '/img/wechat.png' # Share plugin configurations # https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Share/ share:type: sharejs# URL to the ShareThis share plugin scriptinstall_url: '' # Sidebar configurations. # Please be noted that a sidebar is only visible when it has at least one widget sidebar:# Left sidebar configurationsleft:# Whether the sidebar sticks to the top when page scrollssticky: true# Right sidebar configurationsright:# Whether the sidebar sticks to the top when page scrollssticky: true# Sidebar widget configurations # http://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/ widgets:-# Where should the widget be placed, left sidebar or right sidebartype: tocposition: right# Profile widget configurations-# Where should the widget be placed, left sidebar or right sidebarposition: lefttype: profile# Author nameauthor: Runsen# Author titleauthor_title: 喜歡折騰的Runsen,微信聯系:RunsenLiu# Author's current locationlocation: 中國廣東某一個辣雞學院# URL or path to the avatar imageavatar: # Whether show the rounded avatar imageavatar_rounded: false# Email address for the Gravatargravatar: # URL or path for the follow buttonfollow_link: 'https://github.com/MaoliRUNsen'# Links to be shown on the bottom of the profile widgetsocial_links:Github:icon: fab fa-githuburl: 'https://github.com/MaoliRUNsen'QQ:icon: fab fa-qqurl: 'http://wpa.qq.com/msgrd?v=1&uin=2953510364&site=ioshenmue&menu=yes'RSS:icon: fas fa-rssurl: /# Table of contents widget configurations# Recommendation links widget configurations-# Where should the widget be placed, left sidebar or right sidebarposition: lefttype: links# Names and URLs of the siteslinks:CSDN: 'https://blog.csdn.net/weixin_44510615'知乎: 'https://www.zhihu.com/people/qian-xiao-28-8'頭條: 'https://www.toutiao.com/c/user/2115112815048734/'# Categories widget configurations-# Where should the widget be placed, left sidebar or right sidebarposition: lefttype: categories# Recent posts widget configurations-# Where should the widget be placed, left sidebar or right sidebarposition: righttype: recent_posts# Archives widget configurations-# Where should the widget be placed, left sidebar or right sidebarposition: lefttype: archives# Tags widget configurations-# Where should the widget be placed, left sidebar or right sidebarposition: righttype: tags# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/speed-up-your-site-with-custom-cdn/ providers:# Name or URL template of the JavaScript and/or stylesheet CDN providercdn: jsdelivr# Name or URL template of the webfont CDN providerfontcdn: google# Name or URL of the fontawesome icon font CDN providericoncdn: fontawesome項目配置
下面是項目的根目錄配置
# Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html ## Source: https://github.com/hexojs/hexo/# Site title: 'Python之王' subtitle: 'Python之王' description: '人生最重要的不是所站的位置,而是內心所朝的方向。只要我在每篇博文中寫得自己體會,修煉身心;在每天的不斷重復學習中,耐住寂寞,練就真功,不畏艱難,奮勇前行,不忘初心,砥礪前行,人生定會有所收獲,不留遺憾...' keywords: 'Python, Java, 機器學習, 爬蟲, 前端, Spring家族, 人工智能' author: 'Runsen' language: zh-CN timezone: 'Asia/Shanghai'# URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: https://maolirunsen.github.io/ root: / permalink: :year/:month/:day/:title/ permalink_defaults: pretty_urls:trailing_index: true # Set to false to remove trailing 'index.html' from permalinkstrailing_html: true # Set to false to remove trailing '.html' from permalinkssearch:path: search.xmlfield: post# 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:# Writing new_post_name: :title.md # File name of new posts default_layout: post titlecase: false # Transform title into titlecase external_link:enable: true # Open external links in new tabfield: site # Apply to the whole siteexclude: 'default_category' filename_case: 0 render_drafts: true post_asset_folder: true relative_link: true future: true highlight:enable: trueline_number: trueauto_detect: truetab_replace: ''wrap: truehljs: true# Home page setting # path: Root path for your blogs index page. (default = '') # per_page: Posts displayed per page. (0 = disable pagination) # order_by: Posts order. (Order by date descending by default) index_generator:path: ''per_page: 10order_by: -date# Category & Tag default_category: uncategorized category_map: tag_map:# Metadata elements ## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta meta_generator: true# 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 ## Use post's date for updated date unless set in front-matter use_date_for_updated: true# Pagination ## Set per_page to 0 to disable pagination per_page: 10 pagination_dir: page# Include / Exclude file(s) ## include:/exclude: options only apply to the 'source/' folder # include: # exclude: # ignore: #busuanzi: # enable: true# ---------------下面選項需要對應插件的支持--------------- # npm install hexo-generator-index --save # npm install hexo-generator-archive --save # npm install hexo-generator-category --save # npm install hexo-generator-tag --savearchive_generator:per_page: 20 ##歸檔頁面默認20篇文章標題yearly: true ##生成年視圖monthly: true ##生成月視圖tag_generator:per_page: 10 ##標簽分類頁面默認10篇文章category_generator:per_page: 10 ###分類頁面默認10篇文章# Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: icarus# 多說 ShortName busuanzi:enable: true# Deployment ## Docs: https://hexo.io/docs/deployment.html deploy:type: gitrepo: https://github.com/MaoliRUNsen/MaoliRUNsen.github.io.gitbranch: master寫文章
寫文章時需要有下面的標志,沒有<!-- more -->就不能有閱讀全文的標簽。
`
下面就是搭建的效果。
https://maolirunsen.github.io/
有個問題就是不知道怎么解析域名,卡了好久了。還有,網站訪問比較慢。
與50位技術專家面對面20年技術見證,附贈技術全景圖總結
以上是生活随笔為你收集整理的四十五、Gtihub+Hexo+icarus搭建自己的博客的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 四十三、在Vue使用router,路由的
- 下一篇: 辛辣食物都有哪些 辣嘴必备的辛辣美食大全