Giter Club home page Giter Club logo

lolasview.com's Introduction

LolasView.com

Personal Blog created with Jekyll and the gorgeous gem-based theme Minimal Mistakes.

Setup

Open up Tilix terminal and set up the project in your code directory:

$ sudo apt install git ruby
$ mkdir code
$ cd code
$ git clone [email protected]:netzfisch/lolasview.com.git
$ cd lolasview.com
$ bundle install

This only needs to be done once!

Write

To write a new posts, simply add a file in the _posts/ directory that follows the naming convention YYYY-MM-DD-name-of-post.md, edit the post with gedit text editor and include necessary front matter (title, excerpt, header image/teaser, categories, tags, etc.).

Use the file manager to look at the source of existing blog posts and check markdwon syntax to get an idea how to format text and add hyperlinks! To see it in the context of the theme look parallel at the formated post vs. the raw version.

Images need to be placed in the folder assets/imgages/ with following name convention about name and dimension

  • ..._header.jpg with a 3:1 ratio: 1200x400 pixel (banner)
  • ..._large.jpg with a 1:1 ratio: 800x800 pixel (square)
  • ..._large.jpg with a 4:3 ratio: 800x600 pixel (postcard)
  • ..._small.jpg with a 2:3 ratio: 300x450 pixel (portrait)
  • ..._small.jpg with a 3:2 ratio: 300x200 pixel (postcard)
  • ..._teaser.jpg with a 3:2 ratio: 300x200 pixel (teaser)

Use the application gThumb to

  1. crop image to ratio, eg 3:1,1:1, 3:2, etc. and accept, than
  2. resize to image width 1200, 800, 300, etc. and accept and
  3. finally save as with appropiate name extenstion like header, large, small, teaser.

Than link the images ![Simon]({{"/assets/images/cat_simon_small.jpg"}}) in the post with markdown syntax followed by image alignment instructions

  • {: .full}
  • {: .align-left}
  • {: .align-right}

which results in ![Simon]({{"/assets/images/cat_simon_small.jpg"}}){: .align-right}

Preview

To locally preview and check the changes start the terminal Tilix, do

$ bundle exec jekyll serve

and than view in the browser at http://localhost:4000

Deployment

For a general understanding of git and GitHub read Hello World Guide.

First sync the fork

$ git fetch upstream
$ git checkout master
$ git merge upstream/master

To commit start a second terminal tab and do

$ git log            # see the last commits
$ git status         # see the staging area
$ git add .          # mark files to be commited
$ git commit -m "create a blog post about live"

If you forgot something, or want to change stuff in the last commit, do

$ git add .          # mark changed files to becommited
$ git commit --amend # append changes to last commit

than push to GitHub, which also will deploy changes to the server:

$ git push

A successful git push will trigger a GitHub webhook and deploy the static site to Netlify. Than "it is live" and before promoting via email to friends and family check the results at https://www.lolasview.com

Help

For further help and advanced customisations read about

Check out the Jekyll docs for general info on how to use Jekyll.

License

The following directories and their contents are copyright of L0laB. You may not reuse anything therein without my explicit permission:

  • _posts/
  • assets/

Everything else is free software, and may be redistributed under the terms specified in the LICENSE file.

lolasview.com's People

Contributors

l0lab avatar netzfisch avatar

Watchers

 avatar

Forkers

l0lab

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.