Shulou(Shulou.com)06/03 Report--

The method of Building gitee Warehouse + hexo static blog on windows

To build a gitee blog environment requires system software windowsgit, node.js (recommended cnpm) to install Nodejs

Windows download binary package link: https://nodejs.org/dist/v10.16.3/node-v10.16.3-win-x64.zip

Manually extract it to the directory you want to store. Here I have unzipped to the directory G:\ ITInstall\ connectInstall\ Nodejsinstall\ nodejs.

Set environment variabl

The environment variable for nodejs has been set.

Install Taobao image npm install-g cnpm-- registry= https://registry.npm.taobao.org

Install hexo$. / cnpm install-g hexo

Initialize Hexo

Create a hexo folder, change to the hexo directory in the terminal, and enter the command:

$cd / f whirl DocumentMuffle PDF plum weblect blogscarp hexoplink $hexo init

Initialize the completed directory structure:

Get the blog topic $cd / f _ cd Documenttel PDF _ bind _ blog _ themes/next hexo $git clone-- branch v5.1.4 blog themes/next

After the download is complete, you can see the landscape and next folders in the / hexo/themes directory. Hexo uses the landscape theme by default.

Differentiate profile profile path site profile / f/Document-PDF/web-blog/hexo/_config.yml theme profile / f/Document-PDF/web-blog/hexo/themes/next/_config.yml

I am using the theme of next.

The configuration of the site profile is as follows: $vim _ config.yml# Hexo Configuration## Docs: https://hexo.io/docs/configuration.html## Source: https://github.com/hexojs/hexo/# Sitetitle: Jacky Lisubtitle:description:keywords:author: Jacky Lilanguage: zh-Hans # nextv5.1.4 is zh-Hans timezone:# URL## If your site is put in a subdirectory Set url as' http://yoursite.com/child' and root as'/ child/'url: https://jackyyuan.gitee.io/blogroot: / blogpermalink:: year/:month/:day/:title/permalink_defaults:# Directorysource_dir: sourcepublic_dir: publictag_dir: tagsarchive_dir: archivescategory_dir: categoriescode_dir: downloads/codei18n_dir:: langskip_render:# Writingnew_post_name:: title.md # File name of new postsdefault_layout: posttitlecase: false # Transform Title into titlecaseexternal_link: true # Open external links in new tabfilename_case: 0render_drafts: falsepost_asset_folder: truerelative_link: falsefuture: truehighlight: enable: true line_number: true auto_detect: false 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 & Tagdefault_category: uncategorizedcategory_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-DDtime_format: HH:mm:ss# Paginationper_page: 10pagination_dir: page# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: next# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy: type: git repo: https://gitee.com/JackyYuan/Blog.git branch: mastersearch: path: search.xml field: post format: html limit: 10000 configure the contents of the theme configuration file as follows: override: falsefavicon: small: / images/ Favicon-16x16-next.png medium: / images/favicon-32x32-next.png apple_touch_icon: / images/apple-touch-icon-next.png safari_pinned_tab: / images/logo.svgkeywords: "Hexo NexT "rss:footer: icon: user copyright: powered: false theme: enable: false version: falsecanonical: trueseo: false# Menu Settingsmenu: home: / tags: / tags categories: / categories archives: / archives about: / aboutmenu_icons: enable: truescheme: Musesocial: GitHub: https://github.com/firstoney E-Mail: devops_yj@163.comsocial_icons: enable: true icons_only: false transition: falselinks_icon: linklinks_ Title: Linkslinks_layout: blocktoc: enable: true number: true wrap: falsesidebar: position: left display: post offset: 12 b2t: false scrollpercent: false onmobile: false# Post Settingsscroll_to_more: truesave_scroll: falseexcerpt_description: trueauto_excerpt: enable: false length: 150post_meta: item_text: true created_at: true updated_at: false categories: true# Post wordcount display settings# Dependencies: https://github.com/willin/hexo-wordcountpost_wordcount: item_text: true wordcount: false Min2read: false totalcount: false separated_meta: truepost_copyright: enable: false license: CC BY-NC-SA 3.0 license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/# Misc Theme Settingsmobile_layout_economy: falseandroid_chrome_color: "# 222" custom_logo: enabled: false image:highlight_theme: night eightiesfont: enable: true host: # Global font settings used on element. Global: external: true family: Monda size: 16 # Font settings for Headlines (H2, h3, h4, h5, h6, h7). # Fallback to `global` font settings. Headings: external: true family: Roboto Slab size: # Font settings for posts. # Fallback to `global` font settings. Posts: external: true family: # Font settings for Logo. # Fallback to `global` font settings. Logo: external: true family: size: # Font settings for and code blocks. Codes: external: true family: size:needmoreshare2: enable: false postbottom: enable: false options: iconStyle: box boxForm: horizontal position: bottomCenter networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook float: enable: false options: iconStyle: box boxForm: horizontal position: middleRight networks: Weibo,Wechat,Douban,QQZone,Twitter Facebookbusuanzi_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: site_uv_footer: # custom pv span for the whole site site_pv: true site_pv_header: site_pv_footer: # custom pv span for one page only page_pv: true page_pv_header: page_pv_footer:local_search: enable: true trigger: auto top_n_per_article: 1# Tabs tag.tabs: enable: true transition: tabs: false labels: true border_radius: 0motion: enable: true

After saving, execute: hexo clean & & hexo g & & hexo s.

Local preview blog compilation project, enter the command: hexo g run the project, enter the command: hexo s run Times error: wordcount is not defined run the following command: $cnpm install hexo-wordcount@2-- save recompile and run the project.

Use the URL to visit locally

Deploy blog to gitee. 1. Create gitee account number 2. 2. Create a project

Note: the warehouse name JackyLi-Blog in the following figure has been changed to Blog.

After the creation is complete, copy the project address in the project. Paste the address under the site configuration file:

$vim _ config.ymldeploy: type: git repo: https://gitee.com/JackyYuan/Blog.git branch: master3. Publish to gitee input command cnpm install hexo-deployer-git-save installs the automatic deployment publishing tool enter the command hexo clean & & hexo g & & hexo d to post a blog. 4. Gitee Pages settings

Select the Pages option in the service of the project. To deploy pages, you need to bind the mobile phone number. Click start.

New interface:

5. Set up URL and publish blog $vim _ config.ymlurl: https://yuyuancode.gitee.io/blogroot: / blog

I changed my personal space address myself. Just change yuyuancode to jackyyuan.

Change the theme $cd / git clone themes/next PDF change the theme $vim themes/next/_config.ymloverride: falsereminder: falsecache: enable: trueminify: false powered: # Hexo link (Powered by Hexo). Enable: false # Version info of Hexo after Hexo link (vX.X.X). Version: falsemenu: home: / tags: / tags categories: / categories archives: / archives about: / aboutscheme: Muse GitHub: https://github.com/firstoneysocial_icons: enable: true icons_only: false transition: falselinks: Title: https://blog.51cto.com/liyuanjietoc: enable: true position: leftpost_meta: item_text: true created_at: true updated_at: enable: true another_day: true categories: truesymbols_count_time: separated _ meta: true item_text_post: true item_text_total: true awl: 4 wpm: 275wechat_subscriber: enable: true qcode: / uploads/wechat-qcode.jpg description: this is my personal Wechat official account Scan your followers with Wechat. Highlight_theme: night eightiesbookmark: enable: truegithub_banner: enable: true permalink: https://github.com/firstoney title: Follow me on GitHub global: external: true family: Lato size:local_search: enable: true change site configuration file # next6.0 is zh-CN$ vim _ config.ymltitle: Jacky Lisubtitle:description:keywords:author: Jacky Lilanguage: zh-CNtimezone:url: https://jackyyuan.gitee.io/blogroot: / blogpermalink:: year/:month/ : day/:title/permalink_defaults:source_dir: sourcepublic_dir: publictag_dir: tagsarchive_dir: archivescategory_dir: categoriescode_dir: downloads/codei18n_dir:: langskip_render:new_post_name:: title.md # File name of new postsdefault_layout: posttitlecase: false # Transform title into titlecaseexternal_link: true # Open external links in new tabfilename_case: 0render_drafts: falsepost_asset_folder: truerelative_link: falsefuture: truehighlight: enable: true line_number: true auto_detect: false Tab_replace:index_generator: path:''per_page: 10 order_by:-datedefault_category: uncategorizedcategory_map:tag_map:date_format: YYYY-MM-DDtime_format: HH:mm:ssper_page: 10pagination_dir: pagetheme: nextdeploy: type: git repo: https://gitee.com/JackyYuan/Blog.git branch: mastersearch: path: search.xml field: post format: html limit: 10000

Then execute the command hexo clean & & hexo g & & hexo d to publish the blog successfully.

You can write a blog in the / web-blog/hexo/source/_posts directory.

Personal blog effect reference:

common problem

Hexo new articles insert pictures, how to display on the website?

Set site configuration _ config.yml: change post_asset_folder: false to post_asset_folder: true

Install plug-in: npm install https://github.com/CodeFalling/hexo-asset-image-- save

Run hexo n "XXXXXX", and when you generate a XXXXX.md article, you will generate a folder of XXXXXX in the / source/_posts directory. Just put the photos you want to insert in the XXXXX article into this folder with the same name.

Add picture: write {% asset_img xxx.jpg xxx%} where you want to add

Support pdf$ cd themes/next$ lsgit clone https://github.com/theme-next/theme-next-pdf source/lib/pdfnext theme profile: pdf: enable: true # Default height height: 500px pdfobject: / / cdn.jsdelivr.net/npm/pdfobject@2.1.1/pdfobject.min.js in order to embed PDF files in the article You need to create a `pdf` tag with local PDF file URL to reference pdf: {% pdf / path/to/your/file.pdf%} supports images

Support pictures in blog posts

Tag plug-in referenced by the relative path: {% asset_path slug%} {% asset_img slug [title]%} {% asset_link slug [title]%}

Refer to the documentation that supports pictures

The way to reference a picture when inserting a picture in the local md is:

{% asset_img example.jpg This is an example image%} in this way, pictures can also appear on both the article and the home page as well as the archive page.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.