Remove the image files
|
@ -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.
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -51,7 +51,6 @@ $ bash tools/init.sh
|
|||
What it does is:
|
||||
|
||||
1. Remove some files or directories from your repository:
|
||||
|
||||
- `.travis.yml`
|
||||
- files under `_posts`
|
||||
- folder `docs`
|
||||
|
@ -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.
|
||||
|
||||
|
|
|
@ -11,11 +11,11 @@ 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:
|
||||
|
||||
|
|
|
@ -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 = {
|
||||
#!/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'
|
||||
'/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.
|
||||
|
|
Before Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 52 KiB |
Before Width: | Height: | Size: 9.6 KiB |
Before Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 31 KiB |
Before Width: | Height: | Size: 35 KiB |
|
@ -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 指示的地址去访问你的网站。
|
||||
|
||||
|
|