personal website development

2022.03.24

forward Word

The website itself is a big project,Construction of front-end page,Site data storage,Also buy server resources,Even later maintenance,The process is quite cumbersome。

But if you just want to build a personal website,Write blog,I want beauty,I don't want to worry too much and write a blog.。So,Hexo + Kaze + Gitee Pages The way is very suitable for you。

This article talks about how to use these three free technology or services.,To build an accessible static blog site。

personal website development

A reference example and the large section of the code are not posted.,So you say that I am water,Classmate requiredForward this article+focus on+Private letters【1227】Acquire(Please pay attention to it first.,Non-friendly messages are not received

Hexo Introduction

Hexo What is it??

Hexo[1] Is a fast,Simple and powerful blog framework。If you use Markdown write a blog,Hexo You can generate static files with exquisite themes within a few seconds.。

Hexo Install

Pre-requirement

  • Node.js(Version 10.13 above,Recommendation 12.0 Above)
  • Git

Install Git

  • Windows:Download and install git[2]
  • Mac:use Homebrew[3] Install。
  • Linux(Ubuntu,Debian):sudo apt-get install git-core
  • Linux(Fedora,Red Hat,CentOS):sudo yum install git-core

Install Node.js

Node.js Provided for most platforms Official installer[4]

(personal website development)Alternative installation method:

  • Windows:use nvs[5] Install it。
  • Mac:use Homebrew[6] Install。
  • Linux(based on DEB / RPM):and NodeSource[7] Install together。
  • other:Installation through the corresponding package manager。See Node.js which providedguide[8]

Install Hexo

(personal website development)use npm Install Hexo。

npm install -g hexo-cli
personal website development

Use the following instructions to see if the installation is successful。

hexo version
personal website development

If you want to uninstall Hexo,Use the following instructions:

npm uninstall -g hexo-cli

run hexo

After installation,You can pass hexo <command> run Hexo。For example hexo help Directive to get help。

hexo help
(personal website development)personal website development

Initial hexo init Command can create a new one Hexo folder,This folder is actually utilized Hexo The generated site information。Next, how to build a station。

Hexo Establish a station

Initialization operation

use hexo init <folder> The instruction can establish site information under the specified folder:

(personal website development)hexo init java4u.cn

Site initialization:

personal website development

Site initialization,Generate a specified folder:

personal website development

Directory Structure

Enter the site,We look down on the directory structure,as follows:

(personal website development)personal website development

These files have their own responsibilities:

(personal website development)Based on such a structure,Hexo It has the ability to generate static sites。

Locally launched

Let's start local locally,See the actual effect。Enter the following command:

hexo server
personal website development

Hexo Will start the service,Run the default generated website in this machine 4000 Port on the port,Can be accessed directly http://localhost:4000 You can see the homepage of the website,It generates based on default theme,At the same time, there is a default article。

personal website development

This page is just a sample provided by the official,Seeing it means your local environment is running。We can modify the configuration,Adjusting the page related elements。

Core configuration

Here are the configuration information we need to understand or modify。

package.json

This file is listed. Hexo Basic parameter information and plugins it dependent。can be seen,EJS[9]Stylus[10] and Markdown[11] Renderers are installed by default。

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo": "^5.0.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-index": "^2.0.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "^3.0.0",
    "hexo-renderer-stylus": "^2.0.0",
    "hexo-server": "^2.0.0",
    "hexo-theme-landscape": "^0.0.3"
  }
}
(personal website development)If you want to switch the subject,Remember to delete the last default theme dependency。

_config.yml

(personal website development)Site、Website、content、article、Classification&Label、date/Time format、Paging and extension and other information。

website

personal website development

Parameter DescriptiontitleWebsite titlesubtitleSite subtitledescriptionWebsite description,Useful SEOkeywordsWebsite keyword,Support multiple keywords。authorArticle author。languageWebsite language。For Simplified Chinese users,Use different topics may need to be set to different values,Please refer to your own documentation yourself,Common zh-Hansand zh-CN。timezoneWebsite area。Hexo Use your computer's time zone by default。Please refer to Time zone list[12] Set,Such as America/New_York, Japan, and UTC 。General,For mainland China, you can use Asia/Shanghai。

URL

personal website development

Parameter description defaulturlWebsite, must starts with http:// or https://http://example.comrootWebsite root directory,If the loom catalog,set up /blog//permalinkArticle Permanent link[13] Format:year/:month/:day/:title/permalink_defaultsThe default value of each part in the permanent link
pretty_urlsrewrite `permalink`[14] Value to beautify URL
pretty_urls.trailing_indexWhether to keep the tail in the permanent link index.html,Set as false Removaltruepretty_urls.trailing_htmlWhether to keep the tail in the permanent link .html, Set as false removed when (
to the tail index.htmlinvalid)true

content

personal website development

parameter description default valuesource_dirresource folder,This folder is used to store content。sourcepublic_dirpublic folder,This folder is used to store the generated site files。publictag_dirlabel foldertagsarchive_dirarchive folderarchivescategory_dirCategory foldercategoriescode_dirInclude code folder,source_dir subdirectories underdownloads/codei18n_dirglobalization(i18n)folder:langskip_renderSkip rendering of the specified file。The matched files will be copied unchanged to public in the directory。

article

(personal website development)personal website development(personal website development)

parameter description default valuenew_post_nameThe filename of the new article:title.mddefault_layoutDefault layoutpostauto_spacingAdd space between Chinese and Englishfalsetitlecaseconvert the title to title casefalseexternal_linkOpen link in new tabtrueexternal_link.enableOpen link in new tabtrueexternal_link.fieldfor the entire site(site)Effective or only for articles(post)take effectsiteexternal_link.excludeDomain names to exclude。Main domain and subdomains such as www need to be configured separately[]filename_caseConvert the filename to (1) lowercase or (2) capital0render_draftsshow draftfalsepost_asset_folderstart up Asset folder[15]falserelative_linkChange the link to a relative address to the root directory,Absolute addresses are recommended。falsefutureShow future articlestruehighlightCode block settings, see Highlight.js[16] section for usage guide
prismjsCode block settings, see PrismJS[17] section for usage guide

Classification & Label

personal website development

parameter description default valuedefault_categorydefault categoryuncategorizedcategory_maptaxonomy
tag_mapTag Aliases

date/Time format

personal website development

Hexo use Moment.js[18] to parse and display the time。

parameter description default valuedate_formatdate formatYYYY-MM-DDtime_formatTime formatHH:mm:ssupdated_optionwhen Front Matter not specified in `updated`[19] Time updated value of,support mtime(file last modified time),date(use date the value of),empty(Not specify)mtime

pagination

personal website development

parameter description default valueper_pageThe amount of articles displayed per page (0 = Turn off paging)10pagination_dirpaging directorypage

expand

(personal website development)personal website development

【theme】

(personal website development)parameter description default valuethemecurrent topic name。value isfalseDisable themes whenlandscapetheme_configtheme's configuration file。The configuration placed here will override the configuration in the theme directory _config.yml Configuration in no initial configurationdeployDeployment section settings
meta_generatorMeta generator[20] Label。value is false Time Hexo will not insert the tag in the headertrue

(personal website development)【deploy】

The configuration is as follows:

deploy:
  type: git
  repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch]
  message: [message]

parameter description defaultrepolibrary(Repository)address
branchbranch namegh-pages (GitHub) coding-pages (Coding.net) master (others)messagecustom commit messageSite updated: {{ now('YYYY-MM-DD HH:mm:ss') }})tokenOptional token value to authenticate with the repo. Prefix with $ to read token from environment variable

Common commands

Create an article

(personal website development)Use the following command:

hexo new "test"

or shorthand:

hexo n "test"
personal website development(personal website development)

run server

(personal website development)Enter the following command to start the server,your website will be http://localhost:4000 start up。during server startup,Hexo Will monitor file changes and automatically update,You don't need to restart the server。

(personal website development)hexo server (personal website development)or shorthand:

hexo s
personal website development

Generate static files

hexo generate
(personal website development)or shorthand

hexo g

Watch file changes immediately regenerate。This operation blocks the command。

hexo g --watch

Automatically deploy website after generation。

hexo generate --deploy

deploy

Hexo Provides fast and convenient one-click deployment function,Lets you deploy your website to your server with just one command。

hexo deploy

or abbreviated as:

hexo d

Hexo theme

Why you choose Kaze

Hexo The default theme is landscape,But I don't think it's beautiful enough,Recommended here kaze[21] ,It has the following properties:

Install Kaze

exist your site/themes enter

cd themes
git clone https://github.com/theme-kaze/hexo-theme-Kaze.git
personal website development(personal website development)

After successful installation,directory will be created:hexo-theme-Kaze。

Modify site configuration file _config.yml The subject value below is:hexo-theme-Kaze。

(personal website development)personal website development

use hexo server start up Hexo See the effect of the service。

personal website development(personal website development)

You will see that the default theme has been generated,just not many things,need a makeover。

Theme configuration

available in the theme directory _config.yml configuration in file。

theme color

(personal website development)exist color configure in,The following are the default values。

color:
  text-color: "#3c4858"
  text-strong-color: "#2f3d4e"
  text-light-color: "#909faf"
  divider-color: "#e6e8ee"
  title-color: "#475b6d"
  link-color: "#3273dc"
  link-hover-color: "#6596e5"
  info-text-color: "#909faf"
  widget-background-color: "#fff"
  body-background-color: "#f2f5f8"
  border-color: "#e1e4e9"
  pre-color: "#2d2d2d"
  code-color: "#50687c"
  code-background-color: "#e9eaf0"

Font size and font

exist font configure in,The following are the default values。

font:
  font-size: 16px # global font-size
  font-family: '-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif' # global font-family

Site traffic statistics

Traffic statistics currently only support not garlic,Off by default,The total number of site visits and total visitors can be counted。

footer:
  #------------------------
  # pv / uv statistics config
  #------------------------
  statistics:
    enable: false
    type: busuanzi # now version only supports busuanzi
    pv:
      enable: true
      style: The total number of visits to this site{}Second-rate # the style will be shown as $1{pv}$2
    uv:
      enable: true
      style: The total number of visitors to this site{}Second-rate # the style will be shown as $1{uv}$2

data analysis

analytics:
  enable: false
  type: google # google
  google:
    id:
(personal website development)enable Enable analytics support(Off by default)

(personal website development)type Currently only supported google

google.id Specific usage instructions for Google Analytics and id Use can refer toGoogle Docs[22]

front page

Article header image

(personal website development)In the article Front-matter middle banner_img Can set the first page of the page

Panel

widgets:
  showWidgetsMobiles: "none"

showWidgetsMobiles : Whether to display a small component on a narrow screen,none closure(default),flex Open

about

(personal website development)About the page needs to be created,Site source China new construction about Folder and create in the folder index.md,This file needs to include at least

# at ${yoursite}/about/index.md
---
title: about
layout: about
---

Social link

(personal website development)exist about Lower social_linksConfigure,Theme icon depends on iconfont[23],Hexo Successful social icons,You can customize others icon Document or solution to add a custom icon。

(personal website development)about: description: description social_links: - { icon: icon-github, link: https://xxx} # - { icon: icon, link: your link }
personal website development

Chain

The friend's chain format can generate a friend chain page as follows

links:
  example-name-1:
    url: https://example.com
    avatar: https://example.com/avatar.jpg
  example-name-2:
    url: https://example.com
    avatar: https://example.com/avatar.jpg

Article page

Search function

search:
  enable: true
  path: search.json
  field: posts
  searchContent: true

content

The subject directory passed Hexo Native function generation,See some code before I can see

toc:
  showListNumber: false
  maxDepth: 6
  minDepth: 1

showListNumber Whether to generate a number

maxDepth TOC Maximum depth

minDepth TOC Minimum depth

Code highlight

Too much code,It's not posted here.,Classmate requiredForward this article+focus on+Private letters【1227】You can view(Please pay attention to it first.,Because non-friendly news is not received

Mathematical formula

(personal website development)Subject support mathjax and katex Two rendering engine,See some of my code before I see

copyright

copyright:
  enable: true
  writer: # if writer is empty we will use config.author as writer
  declare: All articles of this blog except for special statements,Use<a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">CC BY-NC-SA 4.0 protocol</a>。Please indicate the source!
  style: warning
(personal website development)enable Copyright description(By default)

writer authorid,If you don't fill, you will use the theme configuration. author Or site configuration author

declare Copyright statement,support html Statement

(personal website development)style Disclaimer content style,and note Style is the same

Three parts of copyright content:author、Article link、Copyright Notice

Use writer parameter,Article link is based on site profileurlParameter generation,Copyright statement declare parameter

Front-matter

banner_img

Setting up article with the home page

banner_img_set

Picture to preload when loading,Can be set to loading Figure or thumbnail, etc.

excerpt

Introduction to the article on the homepage for the article,Can also pass <!--more--> To control the display

Comment

support valinegitalk and livere

Specific settings can be referred to the subject configuration document description and related reviews plug-in documents

Count

Topic integration hexo-wordcount[27] Plug-in,Set in the subject profile

wordcount:
  enable: true

Open(By default)

Picture galleries

Picture gallery function is based on fslightbox,Set in the subject profile

fslightbox:
  enable: true
(personal website development)Open(By default)

Label plugin

The subject integrates some labels easy to write

note

exist markdown Writing as follows in the document

{% note style %}
...markdown content
{% endnote %}

There are five styles to choose,primarysuccessinfowarningdanger

personal website development

Record information

You can add files in the subject profile。

footer:
  #------------------------
  # Filing configuration
  # Please place the thumbnail of the public security record in ${yoursite}/img/beian.png
  RecordInfo: "" # 'certainICPPreparexxxNo'
  govRecordInfo: "" # 'A public network securityxxxNo'
  govRecordUrl: "" # Public network security case information address
  #------------------------

Site hosting

Why you choose Gitee Pages

GitHub and Gitee Free static web hosting services。We can use GitHub Pages or Gitee Pages Hosting blog、Project official website and other static pages,This saves the money to buy the server.,No need to spend too much energy maintenance。

GitHub Pages Use very widely,I have used it before.,However, the access is not stable enough,Will affect page loading speed。Gitee Domestic version GitHub,Access speed excellent,And the domestic development momentum is good,So I choose Gitee Pages Come to host my website。

Establish a warehouse

Apply for one Gitee account,Create a new warehouse,Warehouse name as much as the account name,This avoids some problems caused by paths。

personal website development

Then open in the warehouse home service column Gitee Pages Serve。

(personal website development)personal website development

After opening,You have an exclusive second-level domain name website.。

Notice:Warehouse content varies,Need manual trigger update,Page can really take effect。

Connection warehouse


one、Install hexo-deployer-git[29]


npm install hexo-deployer-git --save
personal website development


two、Change setting。


deploy:
  type: git
  repo: git@gitee.com:java4u/java4u.git
(personal website development)Pay attention repo Address is not the address of the warehouse,But you download/The address that pops up while cloning the project,type if git Choose SSH。

personal website development(personal website development)

three、generate/Add to SSH Public key

Gitee 、GitHub Provided SSH Protocol Git Serve,In use SSH Protocol to visit the warehouse warehouse,You need to configure your account first/Warehouse SSH Public key。

(personal website development)Let's see if you have any user names and email.:

(personal website development)git config --global user.name git config --global user.email
personal website development

If you don't have the configuration:

(personal website development)# Set mailbox git config --global user.email *********@qq.com # Set username git config --global user.name '****'

Then generate locally SSH Public key,Mailbox is just a good account:

(personal website development)ssh-keygen -t rsa -C yong__1994@163.com

Can be viewed after you SSH Public key:

cat ~/.ssh/id_rsa.pub

Copy public key Gitee Paste,Add to。

personal website development(personal website development)

Whether the test is successful:

(personal website development)ssh -T git@gitee.com
personal website development(personal website development)

Upload warehouse

执行部署命令,Execute a deployment command。

hexo d
personal website development

Upload local resources to upload remote warehouses

远程仓库虽然可以看到提交记录,Personal website to build babysitting teaching,需要去 Gitee Pages Manual update。

(personal website development)personal website development(personal website development)

Although the remote warehouse can be seen,访问链接即可看到 Hexo But static websites will not perceive real-time changes kaze 主题搭建的静态网站。

(personal website development)personal website development(personal website development)



返回列表
更多新闻资讯

website development company american fork

2022-03-15

website development company american fork Florida, USA,What is the cost of a dynamic e-commerce website??At the data exitWe are e-commerce website designersThe company provides the best professional web design for small or large companies in

quality management plan for website development

2022-03-15

quality management plan for website development Website as a facade in the Internet promotion,Is the display of corporate image,The importance is self-evident。So how to build a high quality website?What issues need to pay attention to during websit

how to choose website development company

2022-03-15

how to choose website development company In today's fast-developing economy,Small and medium-sized enterprises have realized the importance of enterprise website to enterprise development。However,The website building market is polarized。Some