ampstart-blog-post is ampstart.com jekyll theme.
Step1: Clone this repo to your computer
git clone [email protected]:shoyan/ampstart-blog-post.git
cd ampstart-blog-post
Step 2: Run bundle install
bundle insatll
Step 3: Edit _config.yml
Just fill in everything in the # Site settings section. You'll want to set your site's title, your name, your twitter username, etc.
Step 4: Run server
bundle exec jekyll server
Step 5: Access your browse
Step 6: Publish your site
just like any other Jekyll site.
Writing posts works just like it does normally in Jekyll except when you want to include extra resources likes pictures, videos, embedded Twitter posts, etc.
AMP has it's own set of special html tags for including content. You should use these instead of normal Markdown or HTML tags.
The two you are are most likely to need are <amp-img>
and <amp-youtube>
:
<amp-img width="600" height="300" layout="responsive" src="/assets/images/your_picture.jpg"></amp-img>
<amp-youtube data-videoid="lBTCB7yLs8Y" layout="responsive" width="480" height="270"></amp-youtube>
The AMP Project provides helpers for many other types of content like audio, ads, Google Analytics, etc.
Built-in AMP tags:
https://github.com/ampproject/amphtml/blob/master/builtins/README.md
Extended AMP tags:
https://github.com/ampproject/amphtml/blob/master/extensions/README.md
AMP adds built-in validation logic to make sure your pages follow all the rules so they render as fast as possible.
To check your page, just add #development=1
to any url on your site and then
check the javascript console in your browser.
http://localhost:4000/#development=1
You will either see a success message:
Powered by AMP ⚡ HTML – Version 1457112743399
AMP validation successful.
Or you will see a list of errors to fix:
Powered by AMP ⚡ HTML – Version 1457112743399
AMP validation had errors:
The attribute 'style' may not appear in tag 'span'
The attribute 'style' may not appear in tag 'div'
To enable Google Anaytics, add the following lines to your Jekyll site:
google_analytics: UA-NNNNNNNN-N
Google Analytics will only appear in production, i.e., JEKYLL_ENV=production
Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/hello. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.
To set up your environment to develop this theme, run bundle install
.
Your theme is setup just like a normal Jekyll site! To test your theme, run bundle exec jekyll serve
and open your browser at http://localhost:4000
. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
When your theme is released, only the files in _layouts
, _includes
, and _sass
tracked with Git will be released.
The theme is available as open source under the terms of the MIT License.