ORG030

DEEP SEA BIG PINEAPPLE GROUP

Website Development

Environment Preparation

Node Environment Setup

Hexo is written in Node.js, so you need to install Node.js and the npm tool within it.

Windows download path: Node Official Website

According to the computer configuration and actual needs to download the corresponding version, select the 64-bit, Windows Installer(.msi) LTS version.

Git Environment Setup

A distributed version control system used for project version control management, operate git using the Git Bash command line tool.

Windows download path: Git Official Website

Verification of Successful Setup

To open the command line, use win+R and type cmd, Enter the following commands in the command line in sequence, if successful, the corresponding version number will appear

1
2
3
4
5
git --version

node -v

npm -v

Other Tools

Visual Studio Code: Visit https://code.visualstudio.com/ to download Vscode used in the writing of the code and project management.

Typora: Used to edit Markdown documents Visit https://typoraio.cn/ to download it. This is a very simple and easy to use Markdown editor. It supports all features of Markdown syntax, including titles, lists, references, code blocks, etc. It also supports the ability to insert images, links, tables, etc. In addition, Typora also supports instant preview function, you can see your Markdown document in real time, without manually reloading the page.

Hexo

Introduction

  • Hexo is a fast, clean, and efficient blogging framework. Hexo parses articles using Markdown (or another rendering engine) and generates static pages with beautiful topics in seconds.
  • Check out the official Hexo documentation for more details

Installation

First of all, after installing node.js and Git above, we can choose to install hexo from a specific folder. After selecting a folder, right click in the folder and select ‘Git Bash here’ to open the git command line

To install hexo yourself, enter the following at the command line

1
npm install -g hexo-cli

After the run is over, type hexo -v to view the version.

Initialization

  1. 安装Hexo完成后，继续在命令行中执行下列命令，Hexo将会在指定文件夹<folder>中新建所需要的文件，folder可以自定义命名，这就是在本地的博客存储文件夹。
1
2
3
hexo init <folder>
cd <folder>
npm install

新建完成后，<folder>的目录如下：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

you will see the following content in the folder:

  • node_modules: Dependency packages
  • public: Stores generated pages
  • scaffolds: Some templates for generating articles
  • source: To store your articles
  • themes: Themes
  • _config.yml: Blog configuration file

The hexo commands are run in Git Bash from the site directory.

Site configuration file: _config.yml in the site directory. The path is <folder>\_config.yml

Theme configuration file: _config.yml under themes folder in site directory. The path is <folder>\themes\<Theme folder>\_config.yml

  1. Modify the site configuration file. The following information is in the site configuration file, and the specific content is modified according to the team’s own situation.
参数 描述
title Website title
subtitle Website subtitle
description Website Description
keywords Keywords of the website. Use a half-comma to separate multiple keywords.
author Your name
language The language of the website is zh-CN in simplified Chinese and en in English
timezone Site time zone. Hexo uses your computer’s timezone by default. List of time zones For example: America/New_York, Japan, and UTC.
url Web address
root Site root
permalink Permalink format for articles，The default value is:year/:month/:day/:title/
permalink_defaults Default values for the sections in the permalink
pretty_urls Override permalink values to beautify urls
pretty_urls.trailing_index Whether or not to leave the trailing index.html in the permalink, if false, to remove
  1. 保存上述设置，Then enter the following commands in the command line to start locally
1
2
3
hexo clean
hexo generate
hexo server

  1. With this, the task creation is completed, enter localhost:4000 in the browser to see your blog interface.

  2. In the command line ctrl + c can shut down the service.

GitHub Repository Preparation

Creating a Repository

  1. On the GitHub website: https://github.com/, Register a GitHub account.

  2. Click on New repository to create a new repository, set the name of the repository, make it visible to Public so that it is accessible to Internet users, and create a Readme.md document that explains the entire project (optional). Since we are part of the NexMaker-Fab organization, the Owner in the image corresponds to our project:

    Owner：NexMaker-Fab

    Repository name：ORG030

  3. Go to the GitHub Page of the repo and first go to the Settings screen of the repo. In the Pages section, select the main source branch, usually named main, and specify the folder as root before saving preferences, which is important for indexing and deployment of the web page. Note that you may need to adjust this setting at a later time. After saving these Settings, you will receive a link to your repository. Usually the name will be the default Page page display https://github.com/<Github account name>/<Github account name>/

SSH Binding

  1. Enter the following command in Git Bash, where yourname is your GitHub username and youremail is your GitHub email.
1
2
git config --global user.name "yourname"
git config --global user.email "youremail"
  1. Create an SSH key, continue with enter, then you can view the public key by typing cat id_rsa.pub.
1
ssh-keygen -t rsa -C "youremail"

  1. In GitHub’s settings, set up SSH keys by copying the information into it.

  2. Enter the following command in Git Bash to check if SSH is bound successfully.

1
ssh -T git@github.com

Deploying Hexo to GitHub

  1. Open the site configuration file _config.yml in the folder, scroll to the end, and modify the following:
1
2
3
4
deploy:
    type: git
    repo: git@github.com:<Github account name>/<Github account name>.git
    branch: main
  1. Install hexo-deployer-git, just run the following command from the command line (Git Bash) :
1
npm install hexo-deployer-git --save
  1. Deploy. Push to GithubPages. From the command line (Git Bash), type the following commands to return INFO Deploy done: git was successfully pushed:
1
2
hexo g
hexo d

or

1
hexo g -d
  1. After successful deployment, view your blog at https://github.com/<Github account name>/<Github account name>.

Theme

The default theme for Hexo is landscape, so choose a theme you like and download it.

We choose to use Next. For the official documentation, please click here: Documentation | NexT (theme-next.js.org)

Application themes

  1. Paste the downloaded themes folder under themes file in the site directory,or load it with git clone from the command line in the themes folder.
  1. Change the theme field of the site configuration file _config.yml to the name of the theme folder:
1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

Theme optimization

A lot of the functionality is already provided in the Next theme configuration file, so you only need to modify it slightly when you need it.

Set the site establishment time

  • Open themes/next/_config.yml and look for since (the default is the current year) :
1
2
3
4
footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  #since: 2019

Set the theme style

  • Open themes/next/_config.yml, look for Schemes and choose a different theme style according to your personal preference. Remove the previous comment “#” to apply the style.
1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

Set the code highlight theme

  • You can format the code in the highlight field of the site configuration file:
1
2
3
4
5
6
7
highlight:
  enable: true
  # Display line numbers
  line_number: true
  # Automatic, different types of identifiers show different colors, when set to false, the code has a single color
  auto_detect: true
  tab_replace: ''
  • Change the highlight_theme field in the theme configuration file to match your favourite highlighting style, copy_button.style allows you to style the copy button for your code block, for example:

Set the rounded border of the text box

  • In the directory \themes\next\source\css\_variables, open the corresponding file according to the theme style of your choice and change the relevant parameters:
1
2
3
4
// $border-radius-inner     = initial;
// $border-radius           = initial;
$border-radius-inner   = 15px;
$border-radius         = 15px;

Set plate transparency

  • Open themes\next\source\css\_schemes directory, according to the theme style of your choice, go to the corresponding directory, open the files of the corresponding section, and change the background parameter:
1
background: rgba(255,255,255,0.6);  //0.6 is transparency, modifiable

Set the avatar and favicon

  • Open themes/next/_config.yml and look for avatar
  • Open themes/next/_config.yml and look for favicon

Setting up Index.hmtl

Enter the following in the command terminal

1
hexo g

After successful initialization, you should see a public file created in the directory containing index.html, and each interface should have an index.html input file.

There are links to some css files for the site theme, and some links to fonts. In this html file in the root directory, we set our home page, which is the default index.html. We can indirectly change this Index.html by changing the relevant Settings file under the Next theme.

The full Index.html looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: dark)"><meta name="generator" content="Hexo 7.0.0">

  <link rel="apple-touch-icon" sizes="180x180" href="/2023zjude-ORG030/images/1-apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/2023zjude-ORG030/images/1-favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/2023zjude-ORG030/images/1-favicon-16x16.png">
  <link rel="mask-icon" href="/2023zjude-ORG030/images/safari-pinned-tab.svg" color="#222">

<link rel="stylesheet" href="/2023zjude-ORG030/css/main.css">



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha256-yIDrPSXHZdOZhAqiBP7CKzIwMQmRCJ8UeB8Jo17YC4o=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/themes/silver/pace-theme-minimal.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js" integrity="sha256-gqd7YTjg/BtfqWSwsJOvndl0Bxc8gFImLEkXQT8+qj0=" crossorigin="anonymous"></script>

<script class="next-config" data-name="main" type="application/json">{"hostname":"nexmaker-fab.github.io","root":"/2023zjude-ORG030/","images":"/2023zjude-ORG030/images","scheme":"Gemini","darkmode":true,"version":"8.19.1","exturl":false,"sidebar":{"position":"left","display":"always","padding":18,"offset":12},"copycode":{"enable":true,"style":"mac"},"fold":{"enable":false,"height":500},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":true,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":true,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"i18n":{"placeholder":"Searching...","empty":"We didn't find any results for the search: ${query}","hits_time":"${hits} results found in ${time} ms","hits":"${hits} results found"}}</script><script src="/2023zjude-ORG030/js/config.js"></script>

    <meta name="description" content="Welcome to the Deep Sea Big Pineapple Team!Team IntroductionWe are a team that loves to learn and challenge ourselves, and we are committed to collaborating on various academic tasks and projects. Wel">
<meta property="og:type" content="website">
<meta property="og:title" content="Home">
<meta property="og:url" content="https://nexmaker-fab.github.io//2023zjude-ORG030/index.html">
<meta property="og:site_name" content="ORG030">
<meta property="og:description" content="Welcome to the Deep Sea Big Pineapple Team!Team IntroductionWe are a team that loves to learn and challenge ourselves, and we are committed to collaborating on various academic tasks and projects. Wel">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://github.com/ORG030/picorg/blob/main/md01/img02.png?raw=true">
<meta property="article:published_time" content="2023-09-30T16:00:00.000Z">
<meta property="article:modified_time" content="2023-09-30T16:00:00.000Z">
<meta property="article:author" content="Adrenaline">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://github.com/ORG030/picorg/blob/main/md01/img02.png?raw=true">


<link rel="canonical" href="https://nexmaker-fab.github.io//2023zjude-ORG030/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":false,"lang":"en","comments":true,"permalink":"https://nexmaker-fab.github.io//2023zjude-ORG030/index.html","path":"index.html","title":"Home"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>Home | ORG030
</title>
  








  <noscript>
    <link rel="stylesheet" href="/2023zjude-ORG030/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <div class="column">
      <header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="Toggle navigation bar" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/2023zjude-ORG030/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">ORG030</p>
      <i class="logo-line"></i>
    </a>
      <p class="site-subtitle" itemprop="description">DEEP SEA BIG PINEAPPLE GROUP</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger" aria-label="Search" role="button">
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/2023zjude-ORG030/" rel="section"><i class="fa fa-home fa-fw"></i>Home</a></li><li class="menu-item menu-item-about"><a href="/2023zjude-ORG030/About/" rel="section"><i class="fa fa-user fa-fw"></i>About</a></li><li class="menu-item menu-item-assignment"><a href="/2023zjude-ORG030/Assignment/" rel="section"><i class="fa fa-book fa-fw"></i>Assignment</a></li><li class="menu-item menu-item-final-project"><a href="/2023zjude-ORG030/Final%20Project/" rel="section"><i class="fa fa-rocket fa-fw"></i>Final Project</a></li>
  </ul>
</nav>




</header>
        
  
  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          Table of Contents
        </li>
        <li class="sidebar-nav-overview">
          Overview
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#Welcome-to-the-Deep-Sea-Big-Pineapple-Team"><span class="nav-number">1.</span> <span class="nav-text">Welcome to the Deep Sea Big Pineapple Team!</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Team-Introduction"><span class="nav-number">1.1.</span> <span class="nav-text">Team Introduction</span></a></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="Adrenaline"
      src="/2023zjude-ORG030/images/1-favicon-32x32.png">
  <p class="site-author-name" itemprop="name">Adrenaline</p>
  <div class="site-description" itemprop="description">Design program</div>
</div>
<div class="site-state-wrap animated">
  <nav class="site-state">
  </nav>
</div>

        </div>
      </div>
        <div class="back-to-top animated" role="button" aria-label="Back to top">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>
    </div>

    
  </aside>


    </div>

    <div class="main-inner page posts-expand">


    
    
    
    <div class="post-block" lang="en"><header class="post-header">

<h1 class="post-title" itemprop="name headline">Home
</h1>

<div class="post-meta-container">
</div>

</header>

      
      
      <div class="post-body">
          <h2 id="Welcome-to-the-Deep-Sea-Big-Pineapple-Team"><a href="#Welcome-to-the-Deep-Sea-Big-Pineapple-Team" class="headerlink" title="Welcome to the Deep Sea Big Pineapple Team!"></a>Welcome to the Deep Sea Big Pineapple Team!</h2><h3 id="Team-Introduction"><a href="#Team-Introduction" class="headerlink" title="Team Introduction"></a>Team Introduction</h3><p>We are a team that loves to learn and challenge ourselves, and we are committed to collaborating on various academic tasks and projects.</p>
<p>Welcome to visit our website!</p>
<img data-src="https://github.com/ORG030/picorg/blob/main/md01/img02.png?raw=true" style="width: 70%; height: auto;">


      </div>
      
      
      
    </div>

    
    


</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">

  <div class="copyright">
    &copy; 2023 – 
    <span itemprop="copyrightYear">2024</span>
    <span class="with-love">
      <i class="fa fa-heart"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">Adrenaline</span>
  </div>
  <div class="powered-by">Powered by <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/" rel="noopener" target="_blank">NexT.Gemini</a>
  </div>

    </div>
  </footer>

  

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/next-theme-pjax/0.6.0/pjax.min.js" integrity="sha256-vxLn1tSKWD4dqbMRyv940UYw4sXgMtYcK6reefzZrao=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lozad.js/1.16.0/lozad.min.js" integrity="sha256-mOFREFhqmHeQbXpK2lp4nA3qooVgACfh88fpJftLBbc=" crossorigin="anonymous"></script>
<script src="/2023zjude-ORG030/js/comments.js"></script><script src="/2023zjude-ORG030/js/utils.js"></script><script src="/2023zjude-ORG030/js/motion.js"></script><script src="/2023zjude-ORG030/js/next-boot.js"></script><script src="/2023zjude-ORG030/js/pjax.js"></script>

  




  <script src="/2023zjude-ORG030/js/third-party/pace.js"></script>


  





</body>
</html>

Preview

Each time you make a change to your styles, you can use

1
hexo s

to preview the site’s styles locally and make adjustments.

Please refer to the official documentation for more Settings: Documentation | NexT (theme-next.js.org)

Write A Document

  1. Because the article is displayed according to Tags and Categories under the Next theme, it does not quite meet the requirements of the hierarchical display I need. So I used a subdirectory page to create the post.
  • To create a new page, start a command line in the source directory of the file and enter the following, the creation of a custom interface is complete.
1
Hexo new page "Page Name"
  • At the same time, hexo NexT will create the corresponding folders and index.md file in the Source directory, one Markdown file for each page. Or directly create a folder and index.md document in the directory, and modify the Front-matter of the document as needed. You also need to change the Menu hierarchy, name, and identity icon in the theme’s _config.yml file.
  • The Front-matter in the document contains the title, date and other information of the document, which can be modified according to the display requirements.
  • MarkDown Document used for creation, its syntax can refer to the official Document: MarkDown basic grammar | MarkDown official tutorial
  • using this command to upload to github
1
hexo g -d

Web Image Resource Management

Use the Github repository as the graph bed for the article.

Create a repository, give a name, recommended with img for easy identification.

Make sure the repository permissions are Public; everything else can be left as default.

Find a local folder location and git clone the repository.

1
git clone https://github.com/ORG030/picorg.git

In the repository folder to place the required images, you can also create the corresponding subfolder, convenient classification.

Before you need to deploy the updates to GithubPage, open a Git Bash command line in the image repository and type one after another.

1
2
3
4
5
git clone
git pull
git add .
git commit -m "xxxxxxx" # update information
git push

All images will be uploaded to this GitHub repository. Enter the warehouse, right click on the specified picture, you can choose to copy the picture address, use html grammar in Markdown, insert the picture address just copied, you can complete the picture placement, the parameters can be modified according to html grammar and the actual Web page in the mixed layout of the picture parameters.

1
2
3
4
5
6
<img src="Image address" 
style="width: 80%; 
       height: auto; 
       display: block; 
       margin-left: 0; 
       margin-right: auto;">

Other Issues

Insert gif images into the Document

The gif insertion logic is the same as the image insertion logic, also using the Github repository as the diagram bed. And use html syntax for insertion.

Insert a video into the article

First upload the video in the b station, here you can refer to the b station tutorial: https://www.bilibili.com/video/BV1B4411R7Yi/?vd_source=777f38179a6966234c29f2bc091bee8a

After the video is published, go to the video interface and select the Share button，Click Embed Code to get the html link for the video.

Use the html <div> to create a layout, frame the entire video inside it, set its parameters, place it in the right place on the page, unautoplay the video, etc.

1
2
3
4
5
6
7
8
<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;">
    <iframe src="//player.bilibili.com/player.html?aid=366292416&bvid=BV1v94y1J78k&cid=1344169604&p=1&autoplay=0" 
            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
            scrolling="no" 
            frameborder="no"
            allowfullscreen="true">
    </iframe>
</div>