Discovery navigation deployment tutorial - GitHub page

Blogger: September
Release time: September 16, 2020
242 views
No comments
1704 words
Classification: Default classification Source code tutorial

<trans data-src="![nav](https://cdn.9ywk.com/2020/09/4d1893931d1e6.png)

最近在GitHub找到一款不错的网址导航，纯静态，自动化部署，颜值与简约并存，不再是杀马特时代，更多内容在GitHub上查阅，这里记录下详细部署流程。">! [NAV] (https://cdn.9ywk.com/2020/09/4d11893931d1e6. PNG).</trans> <trans data-src="

[nav.ka.mk](http://nav.ka.mk) - 这是我搭建的

[https://github.com/xjh22222228/nav](https://github.com/xjh22222228/nav)

## 如何部署？">[NAV. Ka. MK] (http: / / NAV. Ka. MK) - this is what I built 
 [HTTPS: / / GitHub. COM / xjh222222228 / NAV] (HTTPS: / / GitHub. COM / xjh22222228 / NAV)

###ŦŦŦŦŦ##ා####################?</trans> <trans data-src="

建议你使用 `github pages` 服务, 这样你就不需要提供服务器, 并且项目里自带了自动化部署服务。">It is recommended that you use the 'GitHub pages' service, so that you do not need to provide a server, and the project has its own automated deployment service.</trans> <trans data-src="

一：首先Fork一份在自己仓库

二：申请Token，全部勾选，否则没权限。">1: first of all, fork has a copy in its own warehouse. 2: apply for token, check all of them, otherwise you have no permission.</trans> <trans data-src="
[https://github.com/settings/tokens](https://github.com/settings/tokens)

三：【Setting】 – 【Secrets】- 【New secret】

填写刚申请的token，Name必须填写 `TOKEN`大写
![4241564335.png](https://cdn.9ywk.com/2020/09/aebbdaaab256b.png)

四：【Actions】 – 点击【I understand my workflows, ">Fill in the token you just applied for, and the name must fill in the token that you just applied for. The name must fill in the token that you just applied for. The name must be filled in 'token' in capital letters: [4241564335.png] (http: / / cdn.9ywk.com / 2020 / 09 / 2020 / 09 / 2009 / aebbdaaab256b.png. PNG)

fill in the token you just applied for. The name must fill in the "token" in capital 
 [4241564335.png] (HTTPS: / / cdn.9ywk.com / 2020 / 2020 / 09 / 09 / aebbdaaab256b.png) in the 
 4: [actions] - click [I understand my workflow,</trans> <trans data-src="go ahead and enable them】启动！">Go ahead and enable them!</trans> <trans data-src="
![3591504097.png](https://cdn.9ywk.com/2020/09/f0f12753a06dd.png)

## GitHub Page

在设置中找到GitHub Page

选择`gh-pages`分支·文件夹`root`保存即可，现在就能看见访问地址。">! [3591504097. PNG] (HTTPS: / / CDN. 9ywk. COM / 2020 / 09 / f0f12753a06dd. PNG)

ාාාාා GitHub page 
 in the settings, find GitHub page 
 
 
 select 'GH pages' branch · folder' root 'to save. Now you can see the access address.</trans> <trans data-src="

过一会儿这里会提示域名`nav.xiejiahe.com`被使用，那是作者的，如果你不需要绑定域名可以去`gh-pages`分支里面删除 `CNAME` 或修改成你自己的。">After a while, you will be prompted that the domain name 'NAV. Xiejiahe. Com' is used. It belongs to the author. If you don't need to bind the domain name, you can delete 'CNAME' in the 'GH pages' branch or modify it to your own.</trans> <trans data-src="

![1280766954.png](https://cdn.9ywk.com/2020/09/4b2bd1e6d5623.png)

## 提交Commit

编辑主分支`master`下‘不重要’的文件，例如`README.md`保存即可触发Action！">[1280766954. PNG] (HTTPS: / / CDN. 9ywk. COM / 2020 / 09 / 4b2bd1e6d5623. PNG)

#ා################ා#################!</trans> <trans data-src="

![2761631125.png](https://cdn.9ywk.com/2020/09/5c9225bd33655.png)

**Action完成构建，现在就能访问了。">[2761631125. PNG] (https://cdn.9ywk.com/2020/09/5c9225bd33655. PNG).</trans> <trans data-src="**

## 修改说明

导航数据目录 `data`

`config/index.ts`
配置文件,23行地址是右上角Git地址，建议保留

`src/app/app.component.html`
底部footer

`src/view/app.component.html`
手机端顶部链接，logo地址

`src/index.html`
网站名称,">**In the configuration file, the address on line 23 is the GIT address on the top right corner, and it is recommended to keep the 
, Src / APP / app.component.component.html HTML '
; footer 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 13; 
 13; 
 13; 
 
 
 
 
 
 
 13; 
 
 
 13; 
 
 
 
 
 
 
 
 
 nt. HTML' 
; mobile phone top link, logo address 
 
'src / index. HTML '
; website name,</trans> <trans data-src="统计代码

`assets/icon/logo.png`
logo图

---

## 本地构建

需要安装`Node.js`，可参考这篇文章[`记录下Node.js/vue/yarn安装`](https://www.9ywk.com/289.html)

```
# 下载源代码
# 进入目录
C:\user>cd  *\nav-master\nav-master

# 安装依赖
npm install

# 编译
npm run build

# 启动
npm ">Statistics Code: assets / icon / logo. PNG '
, logo image 
, logo image 
, logo image

youcan download the source code and enter the directory. C: user > CD * \ \ NAV master / NAV master / NAV master / NAV master master / NAV master master master master host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host host 13N NPM</trans> <trans data-src="start
```

**启动完成提示打开即可，`http://localhost:port` 端口**

![446062119.png](https://cdn.9ywk.com/2020/09/f6f9fe21b5043.png)">Start 
 '' '

* * after starting, you can open the prompt, ` http: / / localhost: port' port * *

! [446062119. PNG] (https://cdn.9ywk.com/2020/09/f6f9fe21b5043. PNG)</trans>

The author of this paper is as follows September article title: Discovery navigation deployment tutorial - GitHub page
Baidu collection: Included, details
Address: https://www.9ywk.com/328.html
Copyright notice: unless otherwise specified, this article is“ September blog ”Original, reprint, please keep the source of the article.

) reprint of specifications is allowed

Please feel free to appreciate my article if it is useful

Comment Cancel reply

Using idle mobile phone to build local web environment + ngrok intranet penetration to achieve external network access
Number of visits: twenty-nine thousand and ninety-one
Xiaomi 8 installs Google play service Suite
Number of visits: eighteen thousand seven hundred and four
Chinese and English names of 224 countries in the world
Number of visits: fifteen thousand five hundred and forty-two
Emlog, WordPress, Typecho articles, whether Baidu has included the detection code
Number of visits: fourteen thousand and seven hundred
The green version is suitable for the elderly
Number of visits: thirteen thousand and twenty-five

Discovery navigation deployment tutorial - GitHub page

September • September 16, 2020

<trans data-src="![nav](https://cdn.9ywk.com/2020/09/4d1893931d1e6.png)

[nav.ka.mk](http://nav.ka.mk) - 这是我搭建的

[https://github.com/xjh22222228/nav](https://github.com/xjh22222228/nav)

## 如何部署？">[NAV. Ka. MK] (http: / / NAV. Ka. MK) - this is what I built 
 [HTTPS: / / GitHub. COM / xjh222222228 / NAV] (HTTPS: / / GitHub. COM / xjh22222228 / NAV)

###ŦŦŦŦŦ##ා####################?</trans> <trans data-src="

一：首先Fork一份在自己仓库

三：【Setting】 – 【Secrets】- 【New secret】

填写刚申请的token，Name必须填写 `TOKEN`大写
![4241564335.png](https://cdn.9ywk.com/2020/09/aebbdaaab256b.png)

## GitHub Page

在设置中找到GitHub Page

选择`gh-pages`分支·文件夹`root`保存即可，现在就能看见访问地址。">! [3591504097. PNG] (HTTPS: / / CDN. 9ywk. COM / 2020 / 09 / f0f12753a06dd. PNG)

ාාාාා GitHub page 
 in the settings, find GitHub page 
 
 
 select 'GH pages' branch · folder' root 'to save. Now you can see the access address.</trans> <trans data-src="

![1280766954.png](https://cdn.9ywk.com/2020/09/4b2bd1e6d5623.png)

## 提交Commit

编辑主分支`master`下‘不重要’的文件，例如`README.md`保存即可触发Action！">[1280766954. PNG] (HTTPS: / / CDN. 9ywk. COM / 2020 / 09 / 4b2bd1e6d5623. PNG)

#ා################ා#################!</trans> <trans data-src="

![2761631125.png](https://cdn.9ywk.com/2020/09/5c9225bd33655.png)

**Action完成构建，现在就能访问了。">[2761631125. PNG] (https://cdn.9ywk.com/2020/09/5c9225bd33655. PNG).</trans> <trans data-src="**

## 修改说明

导航数据目录 `data`

`config/index.ts`
配置文件,23行地址是右上角Git地址，建议保留

`src/app/app.component.html`
底部footer

`src/view/app.component.html`
手机端顶部链接，logo地址

`assets/icon/logo.png`
logo图

---

## 本地构建

需要安装`Node.js`，可参考这篇文章[`记录下Node.js/vue/yarn安装`](https://www.9ywk.com/289.html)

```
# 下载源代码
# 进入目录
C:\user>cd  *\nav-master\nav-master

# 安装依赖
npm install

# 编译
npm run build

# 启动
npm ">Statistics Code: assets / icon / logo. PNG '
, logo image 
, logo image 
, logo image

**启动完成提示打开即可，`http://localhost:port` 端口**

![446062119.png](https://cdn.9ywk.com/2020/09/f6f9fe21b5043.png)">Start 
 '' '

* * after starting, you can open the prompt, ` http: / / localhost: port' port * *

! [446062119. PNG] (https://cdn.9ywk.com/2020/09/f6f9fe21b5043. PNG)</trans>

Discovery navigation deployment tutorial - GitHub page

Comment Cancel reply

Using idle mobile phone to build local web environment + ngrok intranet penetration to achieve external network access

Xiaomi 8 installs Google play service Suite

Chinese and English names of 224 countries in the world

Emlog, WordPress, Typecho articles, whether Baidu has included the detection code

The green version is suitable for the elderly

Plug in hermit x, WordPress music player, SSL support

WordPress thoroughly cleans up the remaining WP of unloaded themes and plug-ins_ Options data table

Realization of self built remote desktop by FRP

Website theme color is displayed in the status bar, only for chrome mobile version

The price of alicloud's renewal / transfer to. Win domain name is extremely low, only 3 yuan / year

Discovery navigation deployment tutorial - GitHub page