My personal website, realized using Jekyll and deployed on GitHub pages. The webpage serves a my portfolio and blog.
Follow the official installation instructions for Jekyll on Ubuntu and for testing GitHub Pages sites with Jekyll locally.
- Install the necessary dependencies. Check this:
sudo apt-get install ruby-full build-essential zlib1g-dev
- Set up the environment to install Ruby gems in your user directory:
echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc source ~/.bashrc
- Install Jekyll and Bundler. If you run into permission issues, use sudo gem install jekyll bundler, although installing gems locally (without sudo) is preferred:
gem install jekyll bundler
- Verify that Jekyll and Bundler are correctly installed:
jekyll --version
If Bundler isn't installed, follow the instructions on GeeksforGeeks.
Further problems? Keep reading...
Follow the official instructions to test GitHub Pages sites with Jekyll.
Steps:
- Navigate to your project directory. For example:
cd /opt/proyectos/agarnung.github.io
- Create an initial Gemfile with Bundler:
bundle init
- Open the Gemfile and add the following lines to include Jekyll and the jekyll-gist plugin:
gem 'jekyll' gem 'jekyll-gist'
- Create a _config.yml (see /test/ folder) file in the root of your project with the following basic configuration:
title: agarnung.github.io description: My personal portfolio baseurl: "" # Empty for local development url: "" # Empty for local development plugins: - jekyll-gist
- Open the problematic file _includes/ file and leave it empty to avoid errors while testing locally. Later, when the repository is finished and public, you can add the previous content.
Note
You can start from step 6 to run my website loclly on your machine, from the cloned repo.
- Install the dependencies (Ruby gems) with the following command:
bundle install
(or run it with sudo if necessary)
-
Verify that the Jekyll gem is installed correctly:
bundle exec jekyll --version
-
Run your Jekyll site locally with:
bundle exec jekyll serve
You can now access your website locally at http://127.0.0.1:4000
. If you encounter any issues, check the _config.yml and Gemfile, or refer to the official Jekyll documentation.
A typicall organized structure of a Jeckyll project may be something like this:
├── assets/ # Static files
│ ├── css/ # CSS stylesheets
│ ├── js/ # JavaScript files
│ ├── images/ # Images for the site
│ └── favicon.ico # Site favicon
├── _config.yml # Site configuration file
├── _data/ # Data files (YAML/JSON/CSV)
├── _includes/ # Reusable HTML snippets
├── _layouts/ # Base templates (HTML)
├── pages/ # Static pages (like about, contact, etc.)
├── _posts/ # Blog posts
├── _projects/ # Projects (portfolio items)
├── _sass/ # Sass style fragments
└── _site/ # Output generated by Jekyll (DO NOT EDIT)
This webite is deployed with Github pages. Nevertheless, there are many other ways to deploy Jekyll websites remotely, check this.
- Can't see the favicon?: Clear Cache. Try a hard refresh (Ctrl + F5 or Cmd + Shift + R) or open in incognito mode. Browsers often cache favicons aggressively, and sometimes a simple refresh won't show the new favicon.
inotify
limit for monitoring file changes has been reached? Temporarily increase the inotify watcher limit (this change will be lost after a reboot):sudo sysctl fs.inotify.max_user_watches=524288
This portfolio is based on the awesome template portfolYOU.
Changes made to fulfil my needs:
- Separate timeline in two different trees.
- Changed the Error 404 page
- Added script to list repos through Github API
- Added theme colors for skills
- Disentangled remote theme
- Edited main page layout
- Changed footer, header and other includes. Added dropdown and a [hits counter}(https://hits.sh/)
- Added Latex support in _layouts/post.html
- Added customized "Publications" page
- Justified
<p>
contents - Added sass compilation tags in config.xml
- Added PDF viewer
- Added scss and modified
portfolYOU.scss
- Customized landing page with dynamic message
- Added date dropdown page to list posts in blog
- Added subtitle to skills bars
- Added a Table of Contents for the HTML in the blog posts (.html and .scss)