Remove the image files

This commit is contained in:
Cotes Chung 2021-01-09 22:31:43 +08:00
parent 6e6633c2fc
commit 66a132c462
18 changed files with 42 additions and 49 deletions

View file

@ -9,7 +9,7 @@ Language: English | [简体中文](docs/README.zh-CN.md)
A minimal, sidebar, responsive web design Jekyll theme that focuses on text presentation. Designed to help you record and share your knowledge easily. [Live Demo »](https://chirpy.cotes.info)
[![Devices Mockup](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/devices-mockup.png)](https://chirpy.cotes.info)
[![Devices Mockup](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png)](https://chirpy.cotes.info)
## Table of Contents
@ -134,7 +134,7 @@ For security reasons, GitHub Pages build runs on `safe` mode, which restricts us
1. Push any commit to `origin/master` to trigger the GitHub Actions workflow. Once the build is complete and successful, a new remote branch named `gh-pages` will appear to store the built site files.
2. Browse to your repo's landing page on GitHub and select the branch `gh-pages` as the [publishing source](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) throught _Settings__Options__GitHub Pages_:
![gh-pages-sources](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/gh-pages-sources.png)
![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png)
3. Visit your website at the address indicated by GitHub.

View file

@ -21,8 +21,6 @@ url: ''
author: your_full_name # change to your full name
avatar: /assets/img/sample/avatar.jpg # support internet resources
github:
username: github_username # change to your github username
@ -88,6 +86,8 @@ theme_mode: # [light|dark]
# e.g. 'https://cdn.com'
img_cdn: ''
# the avatar on sidebar, support local or CORS resources
avatar: https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/avatar.jpg
# boolean type, the global switch for ToC in posts.
toc: true

View file

@ -6,7 +6,7 @@ categories: [Blogging, Demo]
tags: [typography]
math: true
mermaid: true
image: /assets/img/sample/devices-mockup.png
image: https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png
---
This post is to show Markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography.
@ -97,34 +97,34 @@ Click the hook will locate the footnote[^footnote], and here is another footnote
- Default (with caption)
![Desktop View](/assets/img/sample/mockup.png)
![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png)
_Full screen width and center alignment_
<br>
- Specify width
![Desktop View](/assets/img/sample/mockup.png){: width="400"}
![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="400"}
_400px image width_
<br>
- Left aligned
![Desktop View](/assets/img/sample/mockup.png){: width="350" .normal}
![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="350" .normal}
<br>
- Float to left
![Desktop View](/assets/img/sample/mockup.png){: width="240" .left}
![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="240" .left}
"A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
<br>
- Float to right
![Desktop View](/assets/img/sample/mockup.png){: width="240" .right}
![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="240" .right}
"A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
<br>

View file

@ -18,7 +18,7 @@ $ git clone https://github.com/USERNAME/USERNAME.github.io.git -b master --singl
### Setting up the local envrionment
If you would like to run or build the project on your local machine, please follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`.
If you would like to run or build the project on your local machine, please follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`.
Before running or building for the first time, please complete the installation of the Jekyll plugins. Go to the root directory of project and run:
@ -51,12 +51,11 @@ $ bash tools/init.sh
What it does is:
1. Remove some files or directories from your repository:
- `.travis.yml`
- files under `_posts`
- folder `docs`
2. If you use the `--no-gh` option, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in folder `.github`.
2. If you use the `--no-gh` option, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in folder `.github`.
3. Automatically create a commit to save the changes.
@ -104,7 +103,7 @@ For security reasons, GitHub Pages build runs on `safe` mode, which restricts us
1. Push any commit to `origin/master` to trigger the GitHub Actions workflow. Once the build is complete and successful, a new remote branch named `gh-pages` will appear to store the built site files.
2. Browse to your repo's landing page on GitHub and select the branch `gh-pages` as the [publishing source](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) throught _Settings__Options__GitHub Pages_:
![gh-pages-sources](/assets/img/sample/gh-pages-sources.png){: width="650" class="normal"}
![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png){: width="650" class="normal"}
3. Visit your website at the address indicated by GitHub.

View file

@ -11,17 +11,17 @@ In [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/), the image fi
With a square image (PNG, JPG or GIF) in hand, open the site [*Favicon & App Icon Generator*](https://www.favicon-generator.org/) and upload your original image.
![upload-image](/assets/img/sample/upload-image.png)
![upload-image](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190811/upload-image.png)
Click button <kbd>Create Favicon</kbd> and wait a moment for the website to generate the icons of various sizes automatically.
![download-icons](/assets/img/sample/download-icons.png){: width="600"}
![download-icons](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190811/download-icons.png){: width="600"}
Download the generated package, unzip and delete the following two from the extracted files:
- browserconfig.xml
- manifest.json
Now, copy the remaining image files (`.PNG` and `.ICO`) from the extracted `.zip` file to cover the original files in the folder `assets/img/favicons/`.
The following table helps you understand the changes to the icon file:

View file

@ -12,16 +12,13 @@ This post is to enable Page Views on the [**Chirpy**][chirpy-homepage] theme bas
## Set up Google Analytics
### Create GA account and property
First, you need to setup your account on Google analytics. While your create your account, you must create your first **Property** as well.
1. Head to <https://https://analytics.google.com/> and click on **Start Measuring**
1. Head to <https://analytics.google.com/> and click on **Start Measuring**
2. Enter your desired *Account Name* and choose the desired checkboxes
3. Enter your desired *Property Name*. This is the name of the tracker project that appears on your Google Analytics dashboard
4. Enter the required information *About your business*
5. Hit *Create* and accept any license popup to setup your Google Analytics account and create your property
### Create Data Stream
@ -29,18 +26,14 @@ First, you need to setup your account on Google analytics. While your create you
With your property created, you now need to set up Data Stream to track your blog traffic. After you signup, the prompt should automatically take you to creating your first **Data Stream**. If not, follow these steps:
1. Go to **Admin** on the left column
2. Select the desired property from the drop down on the second column
3. Click on **Data Streams**
4. Add a stream and click on **Web**
5. Enter your blog's URL
It should look like this:
![google-analytics-data-stream](/assets/img/sample/01-google-analytics-data-stream.png)
![google-analytics-data-stream](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/01-google-analytics-data-stream.png)
Now, click on the new data stream and grab the **Measurement ID**. It should look something like `G-V6XXXXXXXX`. Copy this to your `_config.yml` file
@ -49,7 +42,6 @@ google_analytics:
id: 'G-V6XXXXXXX' # Fill with your Google Analytics ID
pv:
# The Google Analytics pageviews switch.
# DO NOT enable it unless you know how to deploy the Google Analytics superProxy.
enabled: false
# the next options only valid when `google_analytics.pv` is enabled.
proxy_url: ''
@ -59,11 +51,11 @@ google_analytics:
When you push these changes to your blog, you should start seeing the traffic on your Google Analytics. Play around with Google Analytics dashboard to get familiar with the options available as it takes like 5 mins to pickup your changes. You should now be able to monitor your traffic in realtime.
![google-analytics-realtime](/assets/img/sample/02-google-analytics-realtime.png)
![google-analytics-realtime](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/02-google-analytics-realtime.png)
## Setup Page Views
There is a detailed [tutorial](https://developers.google.com/analytics/solutions/google-analytics-super-proxy) available to set up Google Analytics superProxy. But, if you are interested to just quickly get your Chirpy-based blog display page views, follow along. These steps were tested on a Linux machine. If you are running Windows, you can use Git bash terminal to run linux-like commands.
There is a detailed [tutorial](https://developers.google.com/analytics/solutions/google-analytics-super-proxy) available to set up Google Analytics superProxy. But, if you are interested to just quickly get your Chirpy-based blog display page views, follow along. These steps were tested on a Linux machine. If you are running Windows, you can use Git bash terminal to run Unix-like commands.
### Setup Google App Engine
@ -134,18 +126,22 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions
4. Enter any random key for `XSRF_KEY`, your `config.py` should look similar to this
```python
#!/usr/bin/python2.7
__author__ = 'pete.frisella@gmail.com (Pete Frisella)'
# OAuth 2.0 Client Settings
AUTH_CONFIG = {
'OAUTH_CLIENT_ID': 'YOUR_CLIENT_ID',
'OAUTH_CLIENT_SECRET': 'YOUR_CLIENT_SECRET',
'OAUTH_REDIRECT_URI': '%s%s' % (
'https://chirpy-test-XXXXXX.ue.r.appspot.com',
'/admin/auth')
}
# XSRF Settings
XSRF_KEY = 'OnceUponATimeThereLivedALegend'
#!/usr/bin/python2.7
__author__ = 'pete.frisella@gmail.com (Pete Frisella)'
# OAuth 2.0 Client Settings
AUTH_CONFIG = {
'OAUTH_CLIENT_ID': 'YOUR_CLIENT_ID',
'OAUTH_CLIENT_SECRET': 'YOUR_CLIENT_SECRET',
'OAUTH_REDIRECT_URI': '%s%s' % (
'https://chirpy-test-XXXXXX.ue.r.appspot.com',
'/admin/auth'
)
}
# XSRF Settings
XSRF_KEY = 'OnceUponATimeThereLivedALegend'
```
**Tip:** You can configure a custom domain instead of `https://PROJECT_ID.REGION_ID.r.appspot.com`. But, for the sake of keeping it simple, we will be using the Google provided default URL.
@ -189,7 +185,7 @@ XSRF_KEY = 'OnceUponATimeThereLivedALegend'
If everything went good, you'll get this screen:
![superProxy-deployed](/assets/img/sample/03-superProxy-deployed.png)
![superProxy-deployed](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/03-superProxy-deployed.png)
### Create Google Analytics Query
@ -215,14 +211,14 @@ After <kbd>Run Query</kbd>, copy the generated contents of **API Query URI** at
After the query is saved on GAE, a **Public Endpoint** (public access address) will be generated, and we will get the query result in JSON format when accessing it. Finally, click <kbd>Enable Endpoint</kbd> in **Public Request Endpoint** to make the query effective, and click <kbd>Start Scheduling</kbd> in **Scheduling** to start the scheduled task.
![superproxy-query](/assets/img/sample/04-superproxy-query.png)
![superproxy-query](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/04-superproxy-query.png)
## Configure Chirpy to Display Page View
Once all the hard part is done, it is very easy to enable the Page View on Chirpy theme. Your superProxy dashboard should look something like below and you can grab the required values.
![superproxy-dashboard](/assets/img/sample/05-superproxy-dashboard.png)
![superproxy-dashboard](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/05-superproxy-dashboard.png)
Update the `_config.yml` file of [**Chirpy**][chirpy-homepage] project with the values from your dashboard, to look similar to the following:
@ -231,13 +227,11 @@ google_analytics:
id: 'G-XXXXXXXXXX' # Fill with your Google Analytics ID
pv:
# The Google Analytics pageviews switch.
# DO NOT enable it unless you know how to deploy the Google Analytics superProxy.
enabled: true
# the next options only valid when `google_analytics.pv` is enabled.
proxy_url: 'https://PROJECT_ID.REGION_ID.r.appspot.com'
proxy_endpoint: 'https://PROJECT_ID.REGION_ID.r.appspot.com/query?id=<ID FROM SUPER PROXY>'
cache: false # pv data local cache, good for the users from GFW area.
```
Now, you should see the Page View enabled on your blog.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

View file

@ -9,7 +9,7 @@ Language: [English](../README.md) | 简体中文
一个不一样的 Jekyll 主题,采用响应式设计,方便记录、管理、分享你的知识和经验。[懂的进 »](https://chirpy.cotes.info)
[![Devices Mockup](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/devices-mockup.png)](https://chirpy.cotes.info)
[![Devices Mockup](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png)](https://chirpy.cotes.info)
> :bulb: 中文版文档存在更新不及时的风险(开源文档以英文为主,请见谅)。如果发现中、英文内容不匹配的情况,一切以英文版内容为准。如果您愿意的话,可提交 issue 提醒作者更新中文版 README谢谢。
@ -139,7 +139,7 @@ $ docker run -it --rm \
2. 回到 GitHub 上的仓库, 通过 _Settings_
_Options__GitHub Pages_ 选择分支 `gh-pages` 作为[_发布源_](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site):
![gh-pages-sources](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/gh-pages-sources.png)
![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png)
3. 按照 GitHub 指示的地址去访问你的网站。