this blog is used to introduce the technology that uses Hexo to quickly build a personal blog website.Hexo is a static website gen framework which convert the md file to a static webpage.
Download
We need to download these softwares: node and git.
Node is a code running platform.Git is a remote transmission tool which transmit our code to Github(A remote code repository)
We need to download these code packages(accroding to the order to download):
1 2 3 4 5 6 7 8
// 1.download hexo framework npm i hexo // 2.download the butterfly theme(hexo UI style) git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly // 3.download the renderer npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive // 4.this tool is used to put the hexo website on github npm install hexo-deployer-git --save
Shell
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
//1.search for all packages Query all the versions of the installing package hexo -v //2.generate basic file hexo init //3.four useful shell //clear the chache of the previous hexo hexo clean //generate static page in /public(we will transmit the folder to github) //github can only run static page hexo g //hexo runs on localserver(default port 4040) hexo s -p xx //deploay it to github(final operation) hexo d
Configuration
We need to change some files’s content
_config.butterfly.yml
if you don’t have this file,pleate create a same file. The priority of the _config.butterfly.yml is higher than document _config.yml
# Navigation bar settings (導航欄設置) # see https://butterfly.js.org/posts/4aa8abbe/##導航欄設置-Navigation-bar-settings # --------------------------------------
nav: logo:# image display_title:true fixed:false# fixed navigation bar
highlight_theme:light# darker / pale night / light / ocean / mac / mac light / false highlight_copy:true# copy button highlight_lang:true# show the code language highlight_shrink:false# true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button highlight_height_limit:false# unit: px code_word_wrap:false
# Social Settings (社交圖標設置) # formal: # icon: link || the description || color social: fab fa-github:https://github.com/Mrdaimi||Github fas fa-envelope:mailto:[email protected]||Email
# If the banner of page not setting, it will show the top_img default_top_img:"linear-gradient(20deg, #0062be, #925696, #cc426e, #fb0347)"
# The banner image of archive page archive_img:
# If the banner of tag page not setting, it will show the top_img # note: tag page, not tags page (子標籤頁面的 top_img) tag_img:
# The banner image of tag page # format: # - tag name: xxxxx tag_per_img:
# If the banner of category page not setting, it will show the top_img # note: category page, not categories page (子分類頁面的 top_img) category_img:
# The banner image of category page # format: # - category name: xxxxx category_per_img:
cover: # display the cover or not (是否顯示文章封面) index_enable:true aside_enable:true archives_enable:true # the position of cover in home page (封面顯示的位置) # left/right/both position:both # When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示) default_cover: # - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg
# A simple 404 page error_404: enable:false subtitle:'Page Not Found' background:https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png
post_meta: page:# Home Page date_type:created# created or updated or both 主頁文章日期是創建日或者更新日或都顯示 date_format:date# date/relative 顯示日期還是相對日期 categories:true# true or false 主頁是否顯示分類 tags:false# true or false 主頁是否顯示標籤 label:true# true or false 顯示描述性文字 post: date_type:both# created or updated or both 文章頁日期是創建日或者更新日或都顯示 date_format:date# date/relative 顯示日期還是相對日期 categories:true# true or false 文章頁是否顯示分類 tags:true# true or false 文章頁是否顯示標籤 label:true# true or false 顯示描述性文字
# Display the article introduction on homepage # 1: description # 2: both (if the description exists, it will show description, or show the auto_excerpt) # 3: auto_excerpt (default) # false: do not show the article introduction index_post_content: method:3 length:500# if you set method to 2 or 3, the length need to config
# anchor anchor: button: enable:false always_show:false icon:# the unicode value of Font Awesome icon, such as '\3423' auto_update:false# when you scroll in post, the URL will update according to header id.
# figcaption (圖片描述文字) photofigcaption:false
# copy settings # copyright: Add the copyright information after copied content (複製的內容後面加上版權信息) copy: enable:true copyright: enable:false limit_count:50
# Post # --------------------------------------
# toc (目錄) toc: post:true page:false number:true expand:false style_simple:false# for post scroll_percent:true
# Post edit # Easily browse and edit blog source code online. post_edit: enable:false # url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/ # For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/ url:
# Related Articles related_post: enable:true limit:6# Number of posts displayed date_type:created# or created or updated 文章日期顯示創建日或者更新日
# post_pagination (分頁) # value: 1 || 2 || false # 1: The 'next post' will link to old post # 2: The 'next post' will link to new post # false: disable pagination post_pagination:1
# Displays outdated notice for a post (文章過期提醒) noticeOutdate: enable:false style:flat# style: simple/flat limit_day:500# When will it be shown position:top# position: top/bottom message_prev:Ithasbeen message_next:dayssincethelastupdate,thecontentofthearticlemaybeoutdated.
# Footer Settings # -------------------------------------- footer: owner: enable:true since:2020 custom_text: copyright:true# Copyright of theme and framework
aside: enable:true hide:false button:true mobile:true# 手機頁面（ 顯示寬度 < 768px ）是否顯示aside內容 position:right# left or right display: archive:true tag:true category:true card_author:true enable:true description:true card_author: enable:true description: button: enable:true icon:fabfa-github text:GitHub link:https://github.com/Mrdaimi card_announcement: enable:false content:ThisismyBlog card_recent_post: enable:false limit:5# if set 0 will show all sort:date# date or updated card_categories: enable:false limit:8# if set 0 will show all expand:none# none/true/false card_tags: enable:true limit:40# if set 0 will show all color:false card_archives: enable:false type:monthly# yearly or monthly format:MMMMYYYY# eg: YYYY年MM月 order:-1# Sort of order. 1, asc for ascending; -1, desc for descending limit:8# if set 0 will show all card_webinfo: enable:false post_count:true last_push_date:true # busuanzi count for PV / UV in site # 訪問人數 busuanzi: site_uv:true site_pv:true page_pv:true
# Time difference between publish date and now (網頁運行時間) # Formal: Month/Day/Year Time or Year/Month/Day Time runtimeshow: enable:false publish_date:
# Aside widget - Newest Comments newest_comments: enable:false sort_order:# Don't modify the setting unless you know how it works limit:6 storage:10# unit: mins, save data to localStorage avatar:true
# Bottom right button (右下角按鈕) # --------------------------------------
# Conversion between Traditional and Simplified Chinese (簡繁轉換) translate: enable:false # The text of a button default:繁 # the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese） defaultEncoding:2 # Time delay translateDelay:0 # The text of the button when the language is Simplified Chinese msgToTraditionalChinese:'繁' # The text of the button when the language is Traditional Chinese msgToSimplifiedChinese:'簡'
# Read Mode (閲讀模式) readmode:true
# dark mode darkmode: enable:true # Toggle Button to switch dark/light mode button:true # Switch dark/light mode automatically (自動切換 dark mode和 light mode) # autoChangeMode: 1 Following System Settings, if the system doesn't support dark mode, it will switch dark mode between 6 pm to 6 am # autoChangeMode: 2 Switch dark mode between 6 pm to 6 am # autoChangeMode: false autoChangeMode:false # Set the light mode time. The value is between 0 and 24. If not set, the default value is 6 and 18 start:# 8 end:# 22
# show scroll percent in scroll-to-top button rightside_scroll_percent:false
# Don't modify the following settings unless you know how they work (非必要請不要修改 ) # Choose: readmode,translate,darkmode,hideAside,toc,chat,comment # Don't repeat 不要重複 rightside_item_order: enable:false hide:# readmode,translate,darkmode,hideAside show:# toc,chat,comment
# Math (數學) # -------------------------------------- # About the per_page # if you set it to true, it will load mathjax/katex script in each page (true 表示每一頁都加載js) # if you set it to false, it will load mathjax/katex script according to your setting (add the 'mathjax: true' in page's front-matter) # (false 需要時加載，須在使用的 Markdown Front-matter 加上 mathjax: true)
# Local search local_search: enable:false # Preload the search data when the page loads. preload:false # Show top n results per article, show all results by setting to -1 top_n_per_article:1 # Unescape html strings to the readable one. unescape:false CDN:
# Comments System # --------------------------------------
comments: # Up to two comments system, the first will be shown as default # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk use:# Valine,Disqus text:true# Display the comment name next to the button # lazyload: The comment system will be load when comment element enters the browser's viewport. # If you set it to true, the comment count will be invalid lazyload:false count:false# Display comment count in post's top_img card_post_count:false# Display comment count in Home Page
# valine # https://valine.js.org valine: appId:# leancloud application app id appKey:# leancloud application app key avatar:monsterid# gravatar style https://valine.js.org/#/avatar serverURLs:# This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in) bg:# valine background visitor:false option:
# waline - A simple comment system with backend support fork from Valine # https://waline.js.org/ waline: serverURL:# Waline server address url bg:# waline background pageview:false option:
# Facebook Comments Plugin # https://developers.facebook.com/docs/plugins/comments/ facebook_comments: app_id: user_id:# optional pageSize:10# The number of comments to show order_by:social# social/time/reverse_time lang:zh_TW# Language en_US/zh_CN/zh_TW and so on
# messenger # https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin/ messenger: enable:false pageID: lang:zh_TW# Language en_US/zh_CN/zh_TW and so on
# The top_img settings of home page # default: top img - full screen, site info - middle (默認top_img全屏，site_info在中間) # The position of site info, eg: 300px/300em/300rem/10% (主頁標題距離頂部距離) index_site_info_top: # The height of top_img, eg: 300px/300em/300rem (主頁top_img高度) index_top_img_height:
# The user interface setting of category and tag page (category和tag頁的UI設置) # index - same as Homepage UI (index 值代表 UI將與首頁的UI一樣) # default - same as archives UI 默認跟archives頁面UI一樣 category_ui:# 留空或 index tag_ui:# 留空或 index
# Website Background (設置網站背景) # can set it to color or image (可設置圖片 或者 顔色) # The formal of image: url(http://xxxxxx.com/xxx.jpg) background:
# Footer Background footer_bg:false
# Add mask to header or footer (为 header 或 footer 添加黑色半透遮罩) mask: header:true footer:true
# the position of bottom right button/default unit: px (右下角按鈕距離底部的距離/默認單位為px) rightside-bottom:
# Enter transitions (開啓網頁進入效果) enter_transitions:true
# Typewriter Effect (打字效果) # https://github.com/disjukr/activate-power-mode activate_power_mode: enable:false colorful:true# open particle animation (冒光特效) shake:true# open shake (抖動特效) mobile:false
# canvas_nest # https://github.com/hustcc/canvas-nest.js canvas_nest: enable:false color:'0,0,255'#color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.) opacity:0.7# the opacity of line (0~1), default: 0.5. zIndex:-1# z-index property of the background, default: -1. count:99# the number of lines, default: 99. mobile:false
# Global font settings # Don't modify the following settings unless you know how they work (非必要不要修改) font: global-font-size: code-font-size: font-family: code-font-family:
# Font settings for the site title and site subtitle # 左上角網站名字 主頁居中網站名字 blog_title_font: font_link: font-family:
# The setting of divider icon (水平分隔線圖標設置) hr_icon: enable:true icon:# the unicode value of Font Awesome icon, such as '\3423' icon-top:
# Note (Bootstrap Callout) note: # Note tag style values: # - simple bs-callout old alert style. Default. # - modern bs-callout new (v2-v3) alert style. # - flat flat callout style with background, like on Mozilla or StackOverflow. # - disabled disable all CSS styles import of note tag. style:flat icons:true border_radius:3 # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6). # Offset also applied to label tag variables. This option can work with disabled note tag. light_bg_offset:0
# other # --------------------------------------
# Pjax # It may contain bugs and unstable, give feedback when you find the bugs. # https://github.com/MoOx/pjax pjax: enable:false exclude: # - xxxx # - xxxx
# Inject the css and script (aplayer/meting) aplayerInject: enable:false per_page:true
# Snackbar (Toast Notification 彈窗) # https://github.com/polonel/SnackBar # position 彈窗位置 # 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right snackbar: enable:false position:bottom-left bg_light:'#49b1f5'# The background color of Toast Notification in light mode bg_dark:'#1f1f1f'# The background color of Toast Notification in dark mode
# https://github.com/vinta/pangu.js # Insert a space between Chinese character and English character (中英文之間添加空格) pangu: enable:false field:site# site/post
# Add the vendor prefixes to ensure compatibility css_prefix:true
# Inject # Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag) # 插入代码到头部 </head> 之前 和 底部 </body> 之前 inject: head: # - <link rel="stylesheet" href="/xxx.css"> bottom: # - <script src="xxxx"></script>
# CDN # Don't modify the following settings unless you know how they work # 非必要請不要修改 CDN: # The CDN provider of internal scripts (主題內部 js 的 cdn 配置) # option: local/jsdelivr/unpkg/cdnjs/custom # Dev version can only choose. ( dev版的主題只能設置為 local ) internal_provider:local
# The CDN provider of third party scripts (第三方 js 的 cdn 配置) # option: local/jsdelivr/unpkg/cdnjs/custom # when set it to local, you need to install hexo-butterfly-extjs third_party_provider:jsdelivr
# Add version number to url, true or false version:false
# Custom format # For example: https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file} custom_format:
# Site title:"Liam Grant's Blog" subtitle:"The darkest hour is that before the dawn" description:"Website Maintenance" # description: "The darkest hour is that before the dawn" keywords:"science" author:"Liam Grant" language:en timezone:"Asia/Shanghai" # URL ## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project' url:"https://liamgrant.online/" permalink:"/:year/:month/:day/:title/" permalink_defaults: # pretty_urls: # trailing_index: true # Set to false to remove trailing 'index.html' from permalinks # trailing_html: true # Set to false to remove trailing '.html' from permalinks
# 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 tab field:site# Apply to the whole site exclude:"" filename_case:0 render_drafts:false post_asset_folder:false relative_link:false future:true highlight: enable:true line_number:true auto_detect:false tab_replace:"" wrap:true hljs:false prismjs: enable:false preprocess:true line_number:true tab_replace:""
# 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:10 order_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 ## updated_option supports 'mtime', 'date', 'empty' updated_option:"mtime"
# 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:
```java Person person = new Person(); person.Name = "Liam Grant"; person.Birthday = "2001-1-14"; person.Sex = "male"; person.Major = ["IT", "Math"] person.IWantSay("The darkest hour is that before the dawn"); ```
