Giter VIP home page Giter VIP logo

linkr's Introduction

Linkr

Please follow the instructions below to finish the setup of your new L1nkr site.

Installation

  1. Add a LICENSE to your repo.
  2. Clone your version of the template to your local computer:
git clone https://github.com/Ipad-pc/Linkr
  1. Modify config/_default/hugo.yaml and config/_default/params.yaml according to the Configuration below.
  2. In a terminal/commandline, move to the newly created folder using cd.
  3. Build a local version of your site by executing hugo server. You can see the site by navigating to http://localhost:1313/Linkr/ (actual URL will be outputted in the CLI) in a browser.
  4. Add a new image to the assets/ folder, using the same name as you specified in params.yaml.
  5. Add a new icon.png file to update the favicon. The png file should be 512px by 512px in size.

Configuration

All configuration is done in the two configuration files under config/_default/. The URL and site title can be set in hugo.yaml, all other parameters are set in params.yaml.

hugo.yaml:

baseURL: 'https://Ipad-pc.github.io/Linkr'
title: 'L1nkr'

params.yaml:

############################
## Author
############################

author:
  name: Ipad-pc
  image: author.png
  greeting: "Your new L1nkr site :tada:"
  icon: ":wave:" # outcomment (or remove) if you don't want to display the emoji


############################
## Links
############################

links:
  - github: https://github.com/Ipad-pc/Linkr
  - link: https://github.com/Ipad-pc/Linkr#readme

############################
## Colunms of Links
############################

# between 2 & 6 columns are supported (both incl)
columns: 2

###########################
## Icon text
###########################

# add the icon name to each icon
icontext: true

############################
## Tooltips
############################

# add tooltips on all icons
tooltip: true

###############################
## OpenGraph & Twitter Cards
###############################

title: Linkr
description: "Demo site build with L1nkr & Hugo"
images:
  - thumbnail.png

Links are defined by the name (i.e. "github" or "facebook"). The names must match one of the supported links, see list below.

Supported Link Icons

Supported Links Supported Links Supported Links Supported Links
amazon apple bandcamp bitbucket
bluesky check-mark codepen dev
discord dribbble email etsy
facebook flickr foursquare github
gitlab google instagram keybase
kickstarter link linkedin mastodon
medium orcid patreon paypal
reddit signal skype slack
snapchat soundcloud spotify stack-exchange
stack-overflow strava telegram tiktok
tumblr twitch untappd website
whatsapp windows x-twitter youtube

Custom Link Icons

Users can provide their own icons by placing a .svg image in ./assets/icons/ in their own repo. Creating folders when necessary. The image should be as square as possible for the best result. Don't use spaces in the filename! The background color will be the tailwind color bg-indigo-500 (#6366f1) unless another color is specified. This can be done by placing the following css snippet in ./assets/css/custom.css:

.link-nameOfIcon {
  background-color: #6366f1; /* Hex color code */
}

Where nameOfIcon is be the name of the custom .svg file.


Update the Theme Version

The theme version used to build the site is defined in go.mod file.

The best practice is to update to released and tested versions. To update to a specific version execute the following command in a terminal/commandline (at the root path of your site repo):

  hugo mod get github.com/chrede88/[email protected]

Replace X,Y & Z with the corresponding version numbers. You can find the releases here. Please check if any breaking changes are listed under the release you want to update to, before proceeding.


Deploy on Github Pages

You can very easily deploy your site using Github Pages. Included in this template is a Github Action workflow that will build and deploy your site to Github Pages automatically:+1:

You can find the workflow here .github/deploymentWorkflow/buildDeploy.yml. To use this, move it to .github/workflows/.

The workflow is already set up and ready to go, but go through it and spend some time to understand what's going on. Otherwise, it'll always be this black box of magic that you can't fix when it breaks!

Last step: Go to Settings -> Pages -> Build and deployment -> Set the Source to "Github Actions".

Next time you publish a release this workflow will build and deploy your site ๐ŸŽ‰

Your site will be published to the following URL: https://Ipad-pc.github.io/Linkr

linkr's People

Contributors

ipad-pc avatar

Watchers

 avatar

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.