Code Monkey home page Code Monkey logo

blog's Introduction

Personal Site powered by Jekyll

Build and deploy Jekyll site to GitHub Pages

I forked the theme from dark-poole with the goal of hosting a "simple" site that I can publish to and write using markdown files and hopefully as little fuss as possible.

To serve locally use:

bundle exec jekyll serve

Github Actions

On every change to the main branch the Github action should 🤞 run to deploy the latest version of the site to the gh-pages branch.


Contents

Usage

0. Environment

  • Install Homebrew
  • Install chruby
  • Install ruby-install
    • I've upgraded to use Ruby 3.3.0
  • Use chruby for managing the local version of Ruby

1. Install dependencies

Poole is built on Jekyll and uses its built-in SCSS compiler to generate our CSS. Before getting started, you'll need to install the Jekyll gem and related dependencies:

$ gem install jekyll jekyll-gist jekyll-sitemap jekyll-seo-tag

2. Install bundler

You must have bundler installed. If you already have bundler installed, skip this step.

# Update Rubygems
$ gem update --system
# Update bundler
$ gem install bundler

Now install the bundle:

$ bundle install

3. Running locally

To see your Jekyll site with Poole applied, start a Jekyll server. In Terminal, from /dark-poole (or whatever your Jekyll site's root directory is named):

$ bundle exec jekyll serve

Ah, but say you want to include draft posts. Add this build flag:

$ bundle exec jekyll serve --draft

Drafts should be added to the _drafts folder without a date as a prefix in the filename.

Open http://localhost:4000 in your browser, and voilà.

4. Serving it up

You can use GitHub Pages to host your project.

  1. Fork this repo and switch to the gh-pages branch.
  2. If you're using a custom domain name, modify the CNAME file to point to your new domain.
  3. If you're not using a custom domain name, modify the url in _config.yml to point to your GitHub Pages URL. Example: for a site hosted at username.github.io, use http://username.github.io.
  4. If you want to use your repo name as a base url, set the url to your repo link and set the baseurl to your repo name in _config.yml. Example: for site hosted on https://username.github.io/dark-poole, set url as https://username.github.io/dark-poole and baseurl as /dark-poole.
  5. Done! Head to your GitHub Pages URL or custom domain.

No matter your production or hosting setup, be sure to verify the baseurl option file and CNAME settings. Not applying this correctly can mean broken styles on your site.

5. Pagination for sites with base urls

If you are using a base url for your site, (for example, hosted on https://username.github.io/dark-poole) you have to make some changes to get jekyll-pagination to work correctly:

In _config.yml, add this line:

paginate_path: "/baseurl/page:num/"

In archive.md, add {{ site.baseurl }} before {{ post.url }}

<!-- Add "{{ site.baseurl }}" -->
<li><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></li>

In index.html, remove the prepend::

<!-- Remove "prepend:" in "prepend: relative_url" -->
<a
  class="pagination-item newer"
  href="{{ paginator.previous_page_path | relative_url }}"
  >Newer</a
>

Development

CSS is handled via Jeykll's built-in Sass compiler. Source Sass files are located in _sass/, included into styles.scss, and compile to styles.css.

Customize Navbar

You can easily customize the navbar by tweaking the _config.yml file. Simply change the title and url of each of the nav elements, or add more. The order will be preserved in the site.

nav:
  - title: Blog
    url: /posts

  - title: About
    url: /about

Quotebacks

I love the intent behind Quoteback and my goal is to use them whenever I cite someone else.

Interactive articles

I'd like to try writing some interactive explorable explanations. The main tools I've looked at are Curvenote and idyll. I used idyll-embed to create the first explorable on the site - Exploring the Drake Equation.

Oops!

Something broke again. Did I / you / me remember to:

Ruby version

Did you set the version of ruby using chruby?

chruby 2.7.2

M1 Processor

Did you try to install Ruby on a Mac with Apple silicon and read through several blog posts? Read this and update ffi https://www.moncefbelyamani.com/how-to-install-homebrew-and-ruby-on-a-mac-with-the-m1-apple-silicon-chip/

Image Assets

(This might be a poor choice for the future...) The maximum width of the stylesheet right now is 672 pixels so I've been resizing images down for faster loading and to limit the bloat in the repo.

License

Open sourced under the MIT license.

<3

blog's People

Contributors

andrewhwanpark avatar cbarrick avatar chaitanyakuber avatar codegaze avatar coliff avatar cvrebert avatar dato avatar dependabot[bot] avatar dottorblaster avatar gyeben avatar hnarayanan avatar holman avatar indiv0 avatar jamestaylr avatar jangid avatar jeremyrixon avatar jshah avatar juanitofatas avatar juliangrosshauser avatar mathiasvr avatar matiassingers avatar mattr- avatar maurogestoso avatar mdo avatar nickserv avatar resir014 avatar smutek avatar suite22 avatar thebinarypenguin avatar tra avatar

Watchers

 avatar

Forkers

exodus-stories

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.