Customizing Hugo Academic Theme

Instalation

git clone https://github.com/sourcethemes/academic-kickstart.git My_Website

cd My_Website
git submodule update --init --recursive

To add demo content

cp -av themes/academic/exampleSite/* .

I recommend creating two sites, one test or playground website in which you add demo content and other one is a production site. First test and learn new things in demo site then update the production site. Demo site also give you reference how things should be done.


Updating The Dependencies In Academic Theme

  1. Go to the themes/academic/data/assets.toml file.
  2. Update the version number and sri.
  3. Latest version number and sri can be found at cdjnjs.com.

Updating Theme Icons

Updating Icons In Skills Widget

You can use the custom icons from the following site.

  1. https://www.flaticon.com/
  2. Place the custom SVG icon in assets/images/icon-pack/, creating the folders if necessary.

Example below

[[feature]]
  icon = "open-sign"
  icon_pack = "custom"
  name = "R"
  description = "90%"

Adding icons from fontawsome

Example below

Remove fa from fa-linux and class name to pack

CODE FROM FONTAWESOME

<i class="fab fa-linux"></i>

Remove the space between {{ and < on both sides.

{{ < icon name="linux" pack="fab" > }} Linux

RESULT


   Linux

Updating Theme

Always Make Backup Before Updating Theme With Any Method.

Update Using zip File

I found this method very simple and straight forword.

  1. Download hugo-academic-master.zip file.
  2. Extract the hugo-academic-master.zip file.
  3. Rename the folder hugo-academic-master to academic.
  4. Replace this new academic folder with older academic folder that you can find in /your-site/themes/.