Dev Landing Page With Jekyll

Inspired at dev-landing-page of Flexdinesh

Live Demo: Here's my Dev Landing Page With Jekyll Rolly Sanchez :peru:

Minimal landing page for developers.

Developers don't talk much. Their code does all the talking. So here's a minimal landing page for developers.

What is inside | Themes | Making your GitHub Pages | Customizing Theme | Custom Domain | Running in local | Using Docker | Using Docker Compose | Todo | Credits | The Beerware License

What is inside

• Jekyll, Sass and Font-Awesome;
• Google Speed for Desktop: 99/100;
• Google Speed for Mobile: 92/100;
• No JS. :sunglasses:
• Docker and Docker Compose. :smirk:

Themes

Dev Landing Page With Jekyll comes in 12 material themes.

Also have one option for include any background image.

If none of these themes fit within your taste, it's quite easy to customize and create your own too.

Making your GitHub Pages

GitHub makes it easy to create personal websites. Follow this link - GitHub Pages to know how or follow the steps below.

If you already have a GitHub profile (obviously)

• Fork this repo.
• In your repo fork, click in settings option.
• Now, you can rename you repo fork with the name {username}.github.io
• Also, you will should watch in the section Github Pages in the same Settings repo page, enabled your site.
• Git clone your new repo fork.
• Then, Customize your name, links and everything else for your landing page.
• Finally git push

Voila! Your site should be live at https://{username}.github.io

Note: Is very important that your clone your repo fork and modified anything, then you push your changes to show all world your github pages.

Customizing Theme

You can customize theme with this options.

• Edit _config.yml file with your data in the attributes.
  • theme_custom: is the theme name find in the path /_sass/variables/themes.scss. You have 12 theme options: green-white, grey-white, indigo-white, red-white, white-blue, white-grey, white-indigo, white-red, yellow-black, indigo-white-pacifico, white-grey-pacifico and yellow-black-pacifico. For default: indigo-white.
  • theme_name_background: if you will desire background image in your landing page, your put just the image file name , else keep value in false. You can upload custom background image in the path /assets/image/. For default: false.
  • theme_extension_background: is just the extension of your background image file. For default: png.
  • author: is your name, this used to seo and "Hello, I,m author" at home page. For default: Rolly.
  • title_intro: is any text that will overwrite "Hello, I,m author" at home page, keep empty value for don't overwrite "Hello, I,m author". For default: empty value.
  • skill_separator: is the symbol that separate your skills at home page. For default: |.
  • title_plataforms: is the title for plataforms icon at home page, keep empty value for don't show this title. For default: Connect with me on.
  • forkme: show (true value) or hide (false value) fork me button at home page. For default: false.
  • forkme_link: is the link of your repository of project,for default: https://github.com/rollys/jekyll-dev-landing-page.
• Edit plataforms.yml file: in this file your find a plataform list as linkedin, twitter, stackoverflow, etc. You add (or remove) plataform that you use, follow the format.
• Edit skills.yml file: here you put your skills, follow the format.
• Change the favicon: you can change or overwrite the favicon in the path /assets/image/favicon.ico. You can generate own favicon in https://favicon.io/favicon-generator/

Custom Domain

If you want to make your new landing page available under a domain like {username}.com you can get started here - Setting up a custom domain.

Running in Local

For deploy in localhost.

• :star: to the project. :metal:
• Install ruby.
• Execute command in console gem install bundler jekyll
• Git clone or download this project or your repo fork.
• Execute command in console bundle install
• Then run bundle exec jekyll s
• Look in the browser http://127.0.0.1:4000/

Using Docker

Running the container from the root of your project ( obviously you have installed docker ):

docker run -d -p 4000:4000 -it --volume="$PWD:/srv/jekyll" --name "my_dev_landing_page" jekyll/jekyll:latest jekyll serve --watch --incremental --livereload --verbose

Using Docker Compose

Run docker-compose from the root of your project ( obviously you have installed docker and docker-compose ):

docker-compose up

To off and remove the container and image:

docker-compose down

TODO

What remains to be done.

• Minify Html.
• Optimize Css and Style inline.
• Add Style Core inline in the layouts.
• Optimize calls of Css file external.
• Optimize calls of Fonts external (just font necesaries).
• Add project pages.
• Add post pages.
• Convert this template in jekyll-theme ruby gems.

Credits

• @flexdinesh
• @calina-c
• @tallesecb

THE BEERWARE LICENSE

Rolly Sanchez was inspired in the code of Dinesh Pandiyan. As long as you retain this notice you can do whatever you want with this stuff. If we meet someday, and you think this stuff is worth it, you can buy me a beer in return.